Vue.js 的绑定复选框未更新答案

【问题标题】：Bound checkboxes with Vue.js not updatingVue.js 的绑定复选框未更新
【发布时间】：2017-10-16 16:17:16
【问题描述】：

我很难从我的应用程序中提取一段代码来演示这个问题，所以我希望仅仅我的描述就足够清楚，可以得到一些有用的反馈。

我有一个产品表，由 AJAX 调用返回的数组填充。作为调用的一部分，我为数组中的每个对象添加了另一个属性：

  _.each(this.productList, (product, index) => {
      product.selected = true;
  });

在我的表格 HTML 中，我有这个：

<tr v-for="(product, index) in this.productList" :data-code="product.code">
          <td class='selected'>

            <input type="checkbox" :name="'selected'+index" v-model="product.selected">
          </td>
etc.

所以复选框使用“product.selected”作为模型，并且已将数组中的每个项目设置为 true，因此最初检查每一行的复选框。我可以单击复选框，它会相应地更新底层的“product.selected”属性。到目前为止一切顺利。

我的问题是使用“toggleSelection”函数，通过单击按钮触发，该按钮旨在选中或取消选中所有复选框：

  toggleSelection(){
    this.allSelected = !this.allSelected; //initially set to true in data object
    _.each(this.productList, (product, index) => {
      product.selected = this.allSelected;
    });
  },

这似乎与最初的 AJAX 调用大致相同，即循环遍历 productList 数组并设置数组中每个产品对象的 'selected' 属性。而且我可以通过在 Chrome 中使用 Vue 开发工具看到它正在执行此操作，将“product.selected”设置为 true 或 false。但问题是，它不会更新用户界面——即使每个绑定的属性已从 true 更改为 false，复选框仍然处于选中状态。

这对我来说没有任何意义。为什么更改绑定对象时复选框没有取消选中？

【问题讨论】：

这应该可以工作。您是否绑定productList 或该数组中的任何其他元素？你最初是如何设置productList的？它不是计算属性，对吧？
productList 在数据中，如 []。我在 AJAX 调用中通过 'this.productList=data.productList' 分配它。我没有在其他任何地方绑定 productList，不。正如我所说，绑定是第一次工作，但不是对数组的更新，我不明白。
不确定为什么不更新。我在您的代码中看不到任何问题。请看一下fiddle 这是您的代码，但功能齐全。也许您可以看到与您的代码相比有什么不同。
它适用于 Firefox 吗？我只有 Chrome 的这个 pb，它在 Firefox（v58，Nightly）中工作。

标签： vue.js

【解决方案1】：

将product.selected = true; 替换为Vue.set(product,selected,true);

如果 selected 没有在 init 中设置，它将是 falsy，但不会是响应式的。

还有Vue.set(product, selected, this.allSelected)。

【讨论】：

【解决方案2】：

我知道为时已晚，但它可能对某人有所帮助我有同样的问题，在文档中没有找到任何东西

玩弄代码，我发现当绑定到添加到原始对象的新属性时更新 DOM 存在问题“在你的情况下，选择的属性”

我的解决方案是将数据加载到新数组中，然后将新属性添加到同一个数组中，然后将新数组复制到您的数组中“在您的情况下在数据对象中声明 this.productList”

var arr = []
this.loaddata(arr);    //this for example loads data from ajax call ,axios or whatever 
  _.each(arr, (product, index) => {
      product.selected = true;
  };

this.productList = arr.slice(); //copy the array

不知道是不是 Vue 的问题

【讨论】：