I can't figure out how to make a javascript function to update the "checked" value inside the object in an array like this
array:[
{ id:1,
name:"foo"
options: [
{id:"one", checked: false},
{id:"two", checked: true}
]
},
{ id:2,
name:"faa"
options: [
{id:"one", checked: false},
{id:"two", checked: true}
]
}
]
I know how to do it with array of objects but am stuck with this. Any suggestions into what I need to do? Thanks
Update typo in array format
If I understand your requirement correctly. you want to update the checked property via checkbox in HTML template.
Demo :
new Vue({
el: '#app',
data: {
array: [{
id:1,
name:"foo",
options: [
{id:"one", checked: false},
{id:"two", checked: true}]
}, {
id:2,
name:"faa",
options: [
{id:"one", checked: false},
{id:"two", checked: true}]
}]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="data in array" :key="data.id">
<b>{{ data.name }}</b>
<div v-for="(checkboxData, index) in data.options" :key="index">
{{ checkboxData.id }} : <input type="checkbox" v-model="checkboxData.checked"/>
</div>
</div><br>
<b>Updated Value : </b>
<p>{{ array }}</p>
</div>You could use map() to create a new array of objects with the updated values.
const data = [{
id: 1,
name: "foo",
options: [
{ id: "one", checked: false },
{ id: "two", checked: true }
]
},
{
id: 2,
name: "faa",
options: [
{ id: "one", checked: false },
{ id: "two", checked: true }
]
}
];
const result = data.map((d) => {
return {
...d,
options: d.options.map((o) => {
return {
...o,
checked: !o.checked // for example invert the checked value
}
})
}
});
console.log(result);