Vue.js Vue.set不'；t更新对象_Vue.js_Vuejs2

Vue.js Vue.set不'；t更新对象

vue.js vuejs2

Vue.js Vue.set不'；t更新对象,vue.js,vuejs2,Vue.js,Vuejs2,下面是一段代码片段 <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': { valu

下面是一段代码片段

<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>

但是DOM从未更新过。如果我更新已经存在的属性，如

值

，它就会起作用

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

谢谢

@thanksd注意到

Vue.set（this.data.key1，'newData'，'text'）

。在测试这种方法时，我注意到

Object.assign（this.data.key1，{newData:'text'}）

Vue.set之前的代码将中断逻辑。至少对我来说，这看起来有点奇怪，但我希望这会有所帮助。

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

下面是一个工作示例：

newvue({
el:“#应用程序”，
数据（）{
返回{
数据：{
“键1”：{
值：true
},
“键2”：{
值：false
}
}
}
},
安装的（）{
设置超时（（）=>{
Vue.set（this.data.key1，'newData'，'text'）
}, 3000);
}
})


{{value.value}{{value.newData}

Vue.set

用于解决Vue在向对象添加属性时无法检测的问题。因此，似乎您的想法是正确的：

newData