Vue中关于数据改变而页面不改变的解决方法。
vue中数据改变了然而页面视图还是上一次数据的内容;这里我用的是Vue里的 $set()先来说说我为什么用set由于受现代JS的限制,vue不能检测到对象属性的添加或删除。vue会在初始化实例时对属性执行getter/setter 转化过程,所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。vue不允许在已经创建的实例上动态添加新的根级响应式属性,所以就使用Vue....
·
vue中数据改变了然而页面视图还是上一次数据的内容;
这里我用的是Vue里的 $set()
先来说说我为什么用set
由于受现代JS的限制,vue不能检测到对象属性的添加或删除。
vue会在初始化实例时对属性执行getter/setter 转化过程,所以属性必须在data对象上存在才能让vue转换它,这样它才能是响应的。
vue不允许在已经创建的实例上动态添加新的根级响应式属性,所以就使用Vue.set()
方法将响应式属性添加到嵌套的对象上。
我这个地方是点击切换设备型号对应出来数据,没有数据的则显示为空
一开始我是这样改变数据的
for (var i = 0; i < this.testList02.length; i++) {
this.testList02[i].add_time_str = "-";
this.testList02[i].vData = this.kong;
}
发现我在控制台打印出来的数据是正确的 但是我页面上显示的数据不正确;我就想到了可能是我的视图没有及时更新于是我就用Vue的set()
方法
for (var i = 0; i < this.testList02.length; i++) {
var newobj=this.testList02[i]
newobj.add_time_str = "-";
newobj.vData = this.kong;
this.$set(this.testList02,i,newobj)
}
这样视图就能随着数据改变而改变了
更多推荐
已为社区贡献3条内容
所有评论(0)