VUE重复修改属性值页面无法及时渲染问题
最近在做VUE项目时遇到一个坑。a方法修改某一属性的值后,调用b方法,b方法里面修改同一属性,虽然该属性的值已发生变化,但是一直无法及时渲染到页面上例如:data(){return {i:0}},js方法:a(){var that=this;that.i=1;that.b();}...
·
最近在做VUE项目时遇到一个坑。a方法修改某一属性的值后,调用b方法,b方法里面修改同一属性,虽然该属性的值已发生变化,但是一直无法及时渲染到页面上
例如:
data(){
return {
i:0
}
},
js方法:
a(){
var that=this;
that.i=1;
that.b();
},
b(){
var that=this;
var i=2;
that.i=i;
console.log(that.i)
}
虽然最后输出的i是2,但是页面上渲染的经常是1;后来通过查资料发现可以通过set方法来解决这个问题js如下
that.$set(that,'i',i);
当数据层次不多时这样做是可以实现实时渲染;但当数据层级比较多的时候需要手动调用rander函数进行自动更新,如下:
that.$forceUpdate();
that.$set(that,'i',i)
更多推荐
已为社区贡献5条内容
所有评论(0)