vue 改变数据后，数据变化页面不刷新

2024-01-31 21:11| 来源: 网络整理| 查看: 265

在这里插入图片描述

文章目录导文文章重点方法一：使用this.$forceUpdate()强制刷新方法二：Vue.set(object, key, value) 方法三：this.$nextTick 方法四：$set方法导文

在vue项目中，会遇到修改完数据，但是视图却没有更新的情况 vue 改变数据后，数据变化页面不刷新 vue 改变数据后，需要滑动页面，数据才更新 vue中表格数据已改变，页面却未更新数据

文章重点方法一：使用this.$forceUpdate()强制刷新

使用方法：直接调用即可，或者放到html里面使用

直接调用:

this.list.forEach((item)=>{ ... }) console.log(this.list,'this.list') this.$forceUpdate()

放到html里面使用:

... 方法二：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)

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章