码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-02 18:08:47      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:style   动态   允许   初始   reac   margin   响应   mes   ffffff   

根据官方文档定义:

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

受现代 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的方法就可以更新页面了

 

 

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

标签:style   动态   允许   初始   reac   margin   响应   mes   ffffff   

原文地址:https://www.cnblogs.com/yayaonly/p/11290273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!