Vue.set 不更新对象

Question

这是一个代码sn-p

<div id="app">
  <div v-for="(value, key) in data">
    {{value.value}} {{value.newData}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      data: {
        'key1': {
          value: true
        },
        'key2': {
          value: false
        }
      }
    }
  },
  mounted: function () {
    setTimeout(() => {
      var ch = Object.assign(this.data.key1, {newData: 'text'})
      Vue.set(this.data, 'key1', ch)
    }, 3000);
  }
})
</script>

我希望看到

true text
false

但 DOM 从未更新。如果我更新已经存在的属性，如value，它会起作用。

如何更新 DOM 并将新键添加到 Vue 中的现有对象中？

谢谢。

---

@thanksd 注意到 Vue.set(this.data.key1, 'newData', 'text') 有效。在测试这种方法期间，我注意到如果放置 Object.assign(this.data.key1, {newData: 'text'})Vue.set 之前的代码会破坏逻辑。至少对我来说这看起来有点奇怪，但我希望它会有所帮助。

Answer 1

Vue.set 用于解决 Vue 无法检测何时将属性添加到对象这一事实。因此，您似乎有正确的想法：newData 属性最初并不存在于 this.data.key1 对象上，您需要使用 Vue.set 来添加该属性并使其具有反应性。

在您的代码中，Vue.set(this.data, 'key1', ch) 表示将this.data 的key1 属性设置为ch 并使其具有反应性，以便Vue 可以跟踪它。但是，由于 ch 的值只是带有新 newData 属性的 this.data.key1 对象，因此 Vue 仍然不知道该属性正在添加到对象中。

您要做的是在this.data.key1 上设置newData 属性的值，因此您需要这样做：

Vue.set(this.data.key1, 'newData', 'text');

---

这是一个工作示例：

new Vue({
  el: '#app',
  data() {
    return {
      data: {
        'key1': {
          value: true
        },
        'key2': {
          value: false
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      Vue.set(this.data.key1, 'newData', 'text')
    }, 3000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="(value, key) in data">
    {{value.value}} {{value.newData}}
  </div>
</div>