vue改变数据后数据变化页面不刷新的解决方法
导文
在vue项目中,会遇到修改完数据,但是视图却没有更新的情况
- vue 改变数据后,数据变化页面不刷新
- vue 改变数据后,需要滑动页面,数据才更新
- vue中表格数据已改变,页面却未更新数据
文章重点
方法一:使用this.$forceUpdate()强制刷新
使用方法:直接调用即可,或者放到html里面使用
直接调用:
this.list.forEach((item)=>{ ... }) console.log(this.list,'this.list') this.$forceUpdate()
放到html里面使用:
<el-select v-model="..." @change="$forceUpdate()" placeholder="请选择"> ... </el-select>
方法二:Vue.set(object, key, value)
使用方法:
add() { this.$set(this.obj, 'name', '张三') }
方法三:this.$nextTick
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
this.$nextTick 跟全局方法 vue.nextTick 一样,不同的是,回调的 this 自动绑定到调用它的实例上。
使用方法:
this.$nextTick(() => { this.handerErrors() })
方法四:$set方法
使用方法:
//原代码 this.list.a=1 //使用set方法 this.$set(this.list,'a',1)
总结
到此这篇关于vue改变数据后数据变化页面不刷新解决的文章就介绍到这了,更多相关vue数据变化页面不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue+element-ui:使用el-dialog时弹框不出现的解决
这篇文章主要介绍了vue+element-ui:使用el-dialog时弹框不出现的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
这篇文章主要介绍了用vue官方提供的模板vue-cli搭建一个helloWorld案例,需要的朋友可以参考下2018-01-01vue中使用refs定位dom出现undefined的解决方法
本篇文章主要介绍了vue中使用refs定位dom出现undefined的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12vue报错Error:Cannot find module 'fs/promises'的解决方
最近的项目需要用到vue/cli,但是用cnpm安装vue/cli的时候报错了,下面这篇文章主要给大家介绍了关于vue报错Error:Cannot find module 'fs/promises'的解决方式,需要的朋友可以参考下2022-11-11
最新评论