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数据变化页面不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue模板配置与webstorm代码格式规范设置详细的相关资料,需要的朋友可以参考一下文章得具体内容，希望对你有所帮助2021-10-10
这篇文章主要介绍了vue中vant组件样式失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下2022-10-10
无论是小型项目还是中大型项目，Vue-Router都是必选的一个组件，Vue-Router提供了便捷的方式进行路由跳转，在使用过程中有一些坑，希望能给在编码找不到问题时的码农提供一点灵感2022-06-06
vue中的v-model原理,与组件自定义v-model详解
这篇文章主要介绍了vue中的v-model原理,与组件自定义v-model详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue3结合ts从零实现vueuse的useRouteQuery方法
这篇文章主要为大家详细介绍了如何使用vue3与ts从零实现一个类vueuse的useRouteQuery方法,并解决vueuse的useRouteQuery方法存在的一些问题,感兴趣的可以了解下2024-03-03
@change 是 Vue.js 中用于监听表单元素值变化的事件处理器，这篇文章主要介绍了vue的@change的用法,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue 如何处理防止按钮重复点击问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
文章介绍了如何使用Vue和TypeScript封装Axios网络请求,并提供了一个示例文件`request.ts`,展示了如何封装各种请求,此外,还提到了路由管理文件和状态码处理文件的结构2025-12-12
这篇文章主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
最新评论