Question

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

当我处理静态数据时没有问题，一切都按预期工作。例如：

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>

但是当我将此数组作为组件属性传递时，它将停止工作。基本上我从服务器检索一个对象，它有单位数组，我把这个对象传递给组件。如果我传递一个对象或数组无关紧要。像这样：

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

在HTML中我使用item.units而不是单位。 v-for工作，我得到了项目列表，但我无法更新他们的“选定”属性。在Vue检查器中的chrome dev工具中，我可以看到属性已更新，但复选框没有。

为什么会发生这种情况？

提前致谢

Answer 1

应该有阅读文档：https://vuejs.org/guide/list.html#Caveats

问题是如果我更改了对象vue的数组中的元素。我不会跟踪它直到我使用$ set ...

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

1 个答案: