vue改变数据后数据变化页面不刷新的解决方法
更新时间：2023年07月04日 09:32:26 作者：奶糖 肥晨
这篇文章主要给大家介绍了关于vue改变数据后数据变化页面不刷新的解决方法,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数据变化页面不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Web应用中,用户需要通过认证和授权才能访问受保护的资源,为了实现认证和授权功能,通常需要使用Token来标识用户身份并验证其权限,本文给大家介绍了vue2实现无感刷新token的方式,需要的朋友可以参考下2024-02-02
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章介绍了在Linux服务器上部署vue项目的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
本篇文章主要介绍了vue mint-ui学习笔记之picker的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue中使用Scss实现配置、切换主题方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了利用Nuxt.js做Vuex数据持久化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
这篇文章主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
详解vue2.0 transition 多个元素嵌套使用过渡
这篇文章主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue配置后台接口方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
我们的数据存储到数据库,不就是以表格的形式存在吗,所以在界面上显示、操作,使用表格来处理也是非常合理的,这篇文章给大家介绍Element el-table 表格使用方法,感兴趣的朋友一起看看吧2024-03-03
最新评论