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)

将 $this.set 用于 KV 对数组的正确方法是什么？

Answer 1

由于您的rows 对象中的edit 属性已经设置，在这种情况下您不需要使用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.