更新嵌套数组中的 object

Question

我不知道如何制作 javascript function 来更新数组中 object 中的“选中”值

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}
    ]
  }
 ]

我知道如何使用对象数组来做到这一点，但我坚持这样做。 对我需要做什么有什么建议吗？ 谢谢

更新数组格式的拼写错误

Answer 1

如果我正确理解您的要求。 你想通过 HTML 模板中的复选框更新checked的属性。

演示：

 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>

Answer 2

您可以使用map()创建具有更新值的新对象数组。

 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);