Question

这是一个代码段

<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)表示将key1的{{1}}属性设置为this.data并使之具有反应性，以便Vue可以跟踪它。但是，由于ch的值只是具有新ch属性的this.data.key1对象，因此Vue仍不知道该属性已添加到对象中。

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

this.data.key1

这是一个可行的示例：

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);
  }
})

Vue.set不更新对象

1 个答案: