uu2018-pic-banner

vue开发的数据更新视图不更新的解决方法

时间:2021-12-09

vue开发遇到的数据更新视图不更新问题

*在开发过程中我们经常会遇到数据更新视图不更新问题,所以会用到一些方法解决问题,

1、先尝试使用深度监听

telShow:{
 handler(val){
 console.log(val)
 },
 deep:true,
 immediate:true,
}

2、如果是数组对象使用$set方式改变数据内容

this.$set(item1,'value',saveValue);

(数组或者对象,增加名称,内容) 

3、set() 解决不了使用 this.set()解决不了使用this.set()解决不了使用this.forceUpdate()

this.$forceUpdate() 

4、如果没有涉及循环,以上方式基本解决,涉及循环后如果以上方法失效那么我们尝试使用以下方式,为key加时间戳

<div v-for="data in item.children" :key="data.formId + Date.now()"></div> 

5、如果还是没解决,那你找对文章了,笔者当时遇到的就是此类情况,经过不断尝试,询问大佬,最后是使用时间戳加this.$forceUpdate()的方式解决此类问题

<div v-for="data in item.children" :key="data.formId + Date.now()"></div> 

先在循环的地方加入时间戳,然后笔者需要将请求的数据之后赋给双向绑定的值,赋值好后使用this.$forceUpdate(),解决此类问题

    收藏

    发表评论 快来秀出你的观点