Vuejs和Vue.set（），更新Key / Value数组

Question

我试图弄清楚this.$set (aka Vue.set) api在使用它来更新多维数组时是如何工作的。

假设：

new Vue({
  el: '#app',
  data: {
    rows:[{"id": "4", "edit": "true" }, { "id": "5", "edit": "false" }] 

  },
....

我如何使用$this.set做这样的事情：

this.rows[0].edit = false

我知道这不起作用：

this.$set(this.rows2, 0, false)

对于KV对阵列使用$ this.set的正确方法是什么？

Answer 1

由于edit对象中的rows属性已设置，因此在这种情况下您不需要使用Vue.set。您可以设置属性值，Vue会注意到更改：

this.rows[0].edit = false;

这是一个简单的例子：

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5", "edit": false }
      ],
    }
  },
  methods: {
    editNext() {
      let index = this.rows.findIndex(r => r.edit);
      
      this.rows[index].edit = false;

      let next = ++index % this.rows.length;
      this.rows[next].edit = true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="(row, i) in rows" v-if="rows[i].edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

但是，如果最初没有设置行对象的edit属性（或者如果您只是想要安全），那么您需要使用Vue.set来添加属性和让它成为被动的：

this.$set(this.rows[0], 'edit', false);

以下是该案例的一个例子：

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5" }
      ],
    }
  },
  methods: {
    editNext() {
      let i = this.rows.findIndex(r => r.edit);
      
      this.$set(this.rows[i], 'edit', false);
      
      let next = ++i % this.rows.length;
      this.$set(this.rows[next], 'edit', true);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="row in rows" v-if="row.edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

Here's the documentation on Vue's Change Detection Caveats.