vue新增属性响应式更新的问题

根据官方文档定义:

  如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

官方定义:

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。

但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

Vue.set(vm.obj, 'e', 0)
您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.obj,'e',02)

for(var item in interim.message){
    // vue.devstatus[item] = interim.message[item];
    vue.$set(vue.devstatus,item,interim.message[item]);
}

  如上代码:interim.message是我从后台获得到的数据,想要将里边的数据的key和value保存在vue.devstatus中,使用第一种方式vue.devstatus[item] = interim.message[item];不能实现更新页面,使用vue.$set的方法就可以更新页面了

 

 

posted @ 2019-08-02 17:57  w_CJiEYa  阅读(771)  评论(0编辑  收藏  举报