No puedo entender cómo hacer una función javascript para actualizar el valor "marcado" dentro del objeto en una matriz como esta
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} ] } ]Sé cómo hacerlo con una variedad de objetos, pero estoy atascado con esto. ¿Alguna sugerencia sobre lo que debo hacer? Gracias
Actualizar error tipográfico en formato de matriz
Si entiendo bien tu requerimiento. desea actualizar la propiedad checked a través de la casilla de verificación en la plantilla HTML.
demostración:
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>Podría usar map() para crear una nueva matriz de objetos con los valores actualizados.
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);