I have an array in my Vue component that I'm trying to parse out in a method, but I don't want the ID in it at all. I want the array to be the same as it is currently but only show the option index, not the id.
Is there a way, within the method, that I can pop the ID index out of the array entirely?
var vm =
new Vue({
el: "#app",
data: {
options: [
{id:100, option:"1 - John Doe"},
{id:200, option:"2 - Jane Doe"}
]
},
methods: {
getNames(){
let names = this.options;
console.log(names);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="getNames()">TEST</button>
</div>You can loop through the array and create another array
var vm =
new Vue({
el: "#app",
data: {
options: [
{id:100, option:"1 - John Doe"},
{id:200, option:"2 - Jane Doe"}
]
},
methods: {
getNames(){
let names = this.options.map(option => {
return {
option: option.option
}
});
console.log(names);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="getNames()">TEST</button>
</div>This is a pure JavaScript task. It is solvable independently from VueJS or any other framework.
In general you can apply two approaches (either keep what is needed or remove what is obsolete):
map: to transform each source element to the new target format; returns a new arrayforEach with delete: to remove the unwanted property from the original arraylet options: [
{id:100, option:"1 - John Doe"},
{id:200, option:"2 - Jane Doe"}
];
// to get a new (simple) array of strings
let strings = options.map(o => o.option);
console.log(strings);
// to get the same array with nested objects where property was removed
options.forEach(o => delete o.id);
console.log(options);
See also: Remove property for all objects in array
You can use map method:
var vm =
new Vue({
el: "#app",
data: {
options: [
{id:100, option:"1 - John Doe"},
{id:200, option:"2 - Jane Doe"}
]
},
methods: {
getNames(){
let names = this.options.map(o => o.option);
console.log(names);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="getNames()">TEST</button>
</div>