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

这样视图就能随着数据改变而改变了

Logo

前往低代码交流专区

更多推荐