vue.js - Vue.js 未更新的绑定(bind)复选框

Question

我很难从我的应用程序中抽出一大块代码来证明这个问题，所以我希望我的描述足够清楚，可以引出一些有用的反馈。

我有一个产品表，由 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 数组并设置数组中每个产品对象的“已选择”属性。通过在 Chrome 中使用 Vue 开发工具，我可以看到它正在执行此操作，将“product.selected”设置为 true 或 false。但问题是，它不会更新用户界面 - 即使每个绑定(bind)的属性已从 true 更改为 false，所有复选框仍保持选中状态。

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

Answer 1

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

玩代码我发现当绑定(bind)到添加到原始对象的新属性时更新 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的问题