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.

因此，复选框使用＆＃39; product.selected＆＃39;作为模型，对于数组中的每个项目，这已设置为true，因此最初检查每行的复选框。我可以点击复选框，它会更新基础＆＃39; product.selected＆＃39;相应的财产。到目前为止一切顺利。

我的问题是使用＆＃39; toggleSelection＆＃39;单击按钮触发的功能，用于选中或取消选中所有复选框：

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

这看起来与初始AJAX调用大致相同，即循环遍历productList数组并设置＆＃39;选择＆＃39;数组中每个产品对象的属性。我可以从使用Chrome中的Vue开发工具看到它正是这样做的，设置＆＃39; product.selected＆＃39;无论是真还是假。但问题是它没有更新用户界面 - 即使每个绑定的属性都已从true更改为false，复选框仍保持检查状态。

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

Answer 1

我知道为时已晚，但它可能会帮助某人在文档中找不到相同的问题

玩弄代码，发现绑定到原始对象的新属性绑定时，存在更新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是否有问题

Answer 2

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

如果未在初始化中设置selected，它将是虚假的，但不会是被动的。

也Vue.set(product, selected, this.allSelected)。

绑定复选框，Vue.js不更新

2 个答案: