vue数据更新了,视图不更新,怎么解决?
2020-08-06 本文已影响0人
焚心123
-
可以参考下面这篇文章
答:https://blog.csdn.net/bigbear00007/article/details/102594645 -
首先在Vue2.0版本中,在data中声明的变量会被监听,实时更新视图的,一般我们可以在data中声明一些变量来进行数据的一个操作,不过有时候,我们需要给一个数据中加一个变量,最后通过当前的下标来让这个变量为true或者false,这时Vue就检测不到了,所以就会产生数据发生了改变,视图没有更新的原因。
onLoad: function (options) {
var that=this;
// 循环金额的时候,只显示最后一个,给每个金额后main加 二位小数点
var price;
that.list.data.orderList.forEach((v)=>{
v.isUp=false;通过给数据中加这个变量,来达到点击是否显示还是隐藏
price=v.amountPay.toFixed(2);
that.price.push(price)
})
},
methods:{
// 点击查看卡信息,显示信息
show(index){
// 调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。
this.$forceUpdate();//也可以使用object.assign()进行更新视图
//点击当前的下标的数据的时候,让这个变量为true,在点击收起的时候,让当前的变量隐藏
this.list.data.orderList[index].isUp=true;
//方法中可以直接传递当前的数据(item),item.flg=!item.flg;也可以
//第一个参数,如果你当前的数据如this.list.data.orderList是数组就写[],是对象就写{}
this.list.data.orderList=Object.assign([],this.list.data.orderList);
},
// 点击收起
hide(index){
// 调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。
this.$forceUpdate()
this.list.data.orderList[index].isUp=false;
}
}
-
当我们使用这种方式的时候,Vue就会检测不到,就会视图不更新,this.list.data.orderList[index].isUp=true;
-
解决视图不更新还有其他的几种方式,可以点击上面的链接去看看,这个 this.$forceUpdate();不要经常去用,会有点问题