Question

尝试使用Vue创建动态表（link to Codepen）。现在，我想在选中复选框时使用：class 添加类。每个复选框都与对象对象中的特定值绑定。

<tbody>
      <tr v-for="row in filteredData" 
          :key="row.id" 
          :class="{'is-selected':checkboxes[row.id].checked}">
        <td>
          <input type="checkbox" v-model="checkboxes[row.id].checked"></td>
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.position}}</td>
        <td>{{row.salary}}</td>
      </tr>
    </tbody>

没有错误或警告，它只是不起作用。我很高兴听到有关解决这个问题的任何想法。

Answer 1

这就是问题：

this.checkboxes[data[index].id] = { id: data[index].id, checked: false };

以这种方式定义时，object属性不会被激活。

<{3>}中的

，

由于现代JavaScript的局限性（以及放弃   Object.observe），Vue无法检测属性添加或删除。

Vue不允许动态添加新的根级反应   已创建实例的属性。但是，有可能   使用Vue.set（对象，添加反应属性到嵌套对象）   关键，价值）方法

使用https://vuejs.org/v2/guide/reactivity.html设置对象属性会使其成为被动的。

  createCheckboxArr: function(data) {
    for (let index = 0; index < data.length; index++) {
      this.$set(this.checkboxes, data[index].id, {
        id: data[index].id,
        checked: false
      });
    }
  }

根据Vue.js中的v-model将类绑定到元素

1 个答案: