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

vue $set

时间:2018-05-19 19:41:34      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:javascrip   ble   table   方法   无法   对象属性   script   遇到   tar   

problem:
vue 项目中经常遇到一些需要改变 table 的某项数据,或者往 table 中 增删改 某些数据(诸如此类在 created 周期后改变已经初始化的 值)
操作结束后发现 页面根本就不能正常渲染

reason: 

受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,

所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的.。 (详情见 VUE 深入响应式原理

Demo:

// 伪 code 
 var arr = [
 {name:‘peter‘,age:18}  
]
this.data_arr = arr

this.data_arr[0].age = 100

  这段代码想 改变 数组中 peter 的 age,但是如果是在 created 周期后改变,页面可能无法正常渲染

我们可以这么干:

this.$set( this.data_arr[0],"age",20 )   , 具体操作数组和对象的方法如下:

技术分享图片

then, 数组会变化,页面会正常渲染,操作非常友好。

 以上 ~ 88 技术分享图片

 



vue $set

标签:javascrip   ble   table   方法   无法   对象属性   script   遇到   tar   

原文地址:https://www.cnblogs.com/guoyu234/p/9061302.html

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