当键以前不存在时改变 vue 中的值不会更新视图答案

【问题标题】：Mutating a value in vue when the key didn't previously exist does not update the view当键以前不存在时改变 vue 中的值不会更新视图
【发布时间】：2019-11-21 00:15:18
【问题描述】：

我有一个表格，每行都有一个选择框。我希望复选框在数据中建模一个实际上并不存在的值。

<tr v-for="item in someData">
    <input type="checkbox" v-model="item.selected"></td>
    <input type="checkbox" v-model="item.name"></td>
<tr>

从数据库加载时我的数据如下所示：

someData: [
    {'name': 'john'},
    {'name': 'kate'},
    {'name': 'aaron'},
]

当用户按下Select All 按钮时，它应该更新selected 键，即使它不存在（这就是想法）

toggleSelect: function () {
this.someData.forEach(element => {
        element.selected = !element.selected;
    });
}

但是，即使值已更新，复选框也不会做出反应。为了完成这项工作，我需要先获取数据并手动添加键/值，然后再将其加载到视图和渲染中

getDatabaseData: function () {
// some code omitted
    response['data'].forEach(element => {
        element["selected"] = false;
    });
    app.someData = response['data']
}

我做得对吗？我是否认为 Vue 不会对渲染之前不存在的值做出反应？

【问题讨论】：

使用:checked="item.selected" 和@click="toggleSelected(item)"

标签： vue.js

【解决方案1】：

试试这个想法，

在 vue 组件中。

<input type="checkbox" v-model="selectAll"> Select All
   <tr v-for="item in someData" :key="item.name">
      <td>
         <input type="checkbox" v-model="selected" :value="item.name">
      </td>
   {{ item.name }}
</tr>

脚本：

data() {
        return {
            selectAll: false,
            selected: [],
            someData: [{ name: "john" }, { name: "kate" }, { name: "aaron" }]
        };
    },
    watch: {
        selectAll(value) {

            // validate if value is true
            if (value) {
                this.someData.forEach(item => {
                   // push unique value
                   if(this.items.indexOf(item.name) === -1) {
                       this.selected.push(item.name);
                   }
                });
            } else {
                // Unselect all
                this.selected = [];
            }
        }
    }

您有一个selected 变量，所选项目所在的位置。 selectAll 变量选择所有项目并推送到selected 变量。

【讨论】：

【解决方案2】：

您应该使用Vue.set 来更新对象上selected 属性的值，以便具有反应性，如下所示：

import Vue from 'vue';
...
toggleSelect: function () {
    this.someData.forEach(element => {
        Vue.set(element, 'selected', !element.selected);
    });
}

【讨论】：