当前位置: 首页 > news >正文

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

在这里插入图片描述

文章目录

  • 导文
  • 文章重点
      • 方法一:使用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里面使用:

<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)
http://www.lryc.cn/news/67537.html

相关文章:

  • 【Qt编程之Widgets模块】-006:QSortFilterProxyModel代理的使用方法
  • 上林赋 汉 司马相如
  • 7.对象模型
  • 机器学习——基本概念
  • Qt---感觉挺重要的部分
  • springboot+vue家乡特色推荐系统(源码+文档)
  • 在Shell脚本中通过ssh从脚本运行函数
  • 简单学习一下 MyBatis 动态SQL使用及原理
  • WhatsApp如何让客户参与变得更简单?
  • 记一次 MySQL 主从同步异常的排查记录,百转千回
  • Cpython的多线程技术之痛
  • NDK OpenGL离屏渲染与工程代码整合
  • Python基础入门编程代码练习(二)
  • C# | 对象池
  • CSS小技巧之圆形虚线边框
  • QString与QByteArray互相转换的方法
  • Springboot +Flowable,设置流程变量的方式(一)
  • 机器学习13(正则化)
  • 并发编程学习(十一):原子数组、
  • 递归到动态规划:省去枚举行为
  • 服务(第二十一篇)mysql高级查询语句(二)
  • MYSQL高可用配置(MHA)
  • 单精度浮点数与十进制数据相互转换
  • PMP敏捷-4大价值观、12原则
  • K8S—Helm
  • ALSA内部函数调用流程
  • Python正则表达式详解,保姆式教学,0基础也能掌握正则
  • ChatGPT 接入飞书教程,创建自己的聊天机器人
  • JS生成随机数(多种解决方案)
  • 文件IO 函数 静态库和动态库的创建 5.11