Vue.js 将数组传递给子组件时的模型绑定

我想做一件简单的事。我有一个实体表，每个实体都有一个复选框。另外，在表格标题中，有一个全局复选框，这样我可以一次选择所有实体

当我处理静态数据时，没有问题，一切正常。例如：

data() {
  allUnitsSelected: false,
  units: [
    {
      selected: false
    },
    {
      selected: false
    },
    {
      selected: false
    },
  ]
},

watch: {
  allUnitsSelected() {
    this.units.forEach((unit) => {
      unit.selected = this.allUnitsSelected
    })
  }
}

和HTML：

<thead>
  <tr>
    <th><input type="checkbox" v-model="allUnitsSelected"></th>
  </tr>
</thead>
<tbody>
  <tr v-for="unit in units" :class="{ selected: unit.selected }">
    <td>
      <input type="checkbox" id="checkbox" v-model="unit.selected">
    </td>
  </tr>
</tbody>

在HTML中，我使用item.units而不仅仅是units。v-for works和I-Get项目列表，但我无法更新其“selected”属性。在Vue inspector中的chrome开发工具中，我可以看到属性得到更新，但复选框没有

为什么会发生这种情况

---

提前感谢

您应该已经阅读了以下文档：

---

问题是，如果我更改了object vue.js数组中的元素，则在使用$set之前不会跟踪它…

应该阅读文档：

---

问题是，如果我更改对象vue.js数组中的元素，直到我使用$set…

才能跟踪它，您能提供一些您试图创建的组件的代码吗？Ehy Victor，如果您提供JSFIDLE，帮助您会容易得多。您能提供一些您试图创建的组件的代码吗？Ehy Victor，如果您提供了一个JSFIDLE，那么帮助您会容易得多。

export default {
  props: ['item'],
  data() {
     allUnitsSelected: false
  }
}