VUE 视图不刷新解决方法

折腾VUE总会遇到这种问题,一直以来都是想用各种方法凑合,网上一般也是方法各异,像this.$updateForce强制刷新视图(基本无效),还有用vue的set方法、js的splice方法设置数据,但这并不能解决所有问题,也有人说用key,但一直没试过,直到今天尝试着用key来解决,结果发现还是很OK的。

具体方法就是在每次更新数据后,刷新一下key,比如我想刷新表格的其中几列,那么我可以这样写:

<el-table-column label="列1" :key="'col1'+timestamp"></el-table-column>
<el-table-column label="列2" :key="'col2'+timestamp"></el-table-column>
<el-table-column label="列3" :key="'col3'+timestamp"></el-table-column>

timestamp 是时间戳,可用以下代码获取。

this.timestamp = new Date().valueOf()

每次刷新数据后,重新给timestamp赋值,然后视图就会跟着刷新了。

当然,key并不局限于表格,其他地方也一样可以用,比如拖拽操作中,发现拖拽后数据更新了,但视图还是原来的老样子,也可以使用这个key,每个被拖拽的元素都加一个key,每次拖拽完给timestamp重新赋值就OK了。

同理,如果想整个刷新表格,则给<el-table :key="'table'+timestamp">......</el-table>即可,而el-table-column就不需要再加key了。

但是要注意一点,刷新key可能会导致原有的绑定事件失效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当代深度学习模型介绍--门控循环单元(GRUs)

AI大模型学习 方向一&#xff1a;AI大模型学习的理论基础 模型和应用的多样化&#xff1a;随着研究的深入&#xff0c;深度学习领域出现了多种创新的模型架构&#xff1a; 卷积神经网络&#xff08;CNNs&#xff09;专门针对图像处理任务进行了优化&#xff0c;通过模拟生物视…

STM32的芯片无法在线调试的情况分析

问题描述 本博客的目的在于帮助网友尽快地解决问题&#xff0c; 避免浪费时间&#xff0c; 查漏补缺。 在stm32的开发过程中&#xff0c;有时会遇到"STM No Target connected"的错误提示&#xff0c;这说明MDK开发环境无法与目标设备进行通信&#xff0c;导致无法烧…

YOLOv9改进策略 :注意力机制 | 注意力机制与卷积的完美融合 | 最新移动端高效网络架构 CloFormer

💡💡💡本文改进内容: 引入CloFormer 中的 AttnConv,上下文感知权重使得模型能够更好地适应输入内容。相比于局部自注意力机制,引入共享权重使得模型能够更好地处理高频信息,从而提高性能。 💡💡💡注意力机制与卷积的完美融合 AttnConv | 亲测在多个数据集能够…

15.三数之和

题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意&#xff1a;答案中不可以包含重复的三元组。示例 …

windows安全中心设置@WindowsDefender@windows安全中心常用开关

文章目录 abstractwindows defender相关服务&#x1f47a; 停用windows Defender临时关闭实时防护使用软件工具关闭defender control(慎用)dismdControl 其他方法使其他杀毒软件注册表修改 保护历史恢复被认为是有病毒的文件添加信任目录,文件,文件类型或进程 abstract window…

算法复习:链表

链表定义 struct ListNode { int val;ListNode *next;ListNode(int x) : val(x), next(nullptr) {} }; 链表的遍历&#xff1a;ListNode phead; while(p!null) pp.next; 找到链表的尾结点&#xff1a;phead; while(p.next!null)pp.next; 链表节点的个数&#xff1a; phead…

java 继承extends

权限 子类会自称父类所有的非私有的成员变量和方法&#xff08;不包括缺省和protected&#xff09;权限修饰符的种类如下&#xff1a; 上面說的protected 方法可以被任意包的子类中使用&#xff0c;但是子类的的实例不能使用&#xff0c;因为没有继承&#xff0c;否则报错。 继…

mongodb中的字符串排序

前言 数据库有一索引字段&#xff0c;ObjectId与string类型混用。 需要辨明sort后的排序关系。 输入 [{"_id": {"$oid": "e98799a7e181225ad5c87476"} }, {"_id": {"$oid": "e98799a7e181225ad5c87477"} }, {&…

lab-1:Xv6 and Unix utilities

实验工具 clone实验源码 git clone git://g.csail.mit.edu/xv6-labs-2023进入目录 cd xv6-labs-2023运行内核 make qemu打印数据 Ctrl-p退出 ctrax xv6中的system call int fork() Create a process, return child’s PID. int exit(int status) Terminate the current p…

腾讯云2核4G服务器优惠价格165元一年,限制500GB月流量

腾讯云轻量2核4G5M服务器租用价格165元1年、252元15个月、三年900元&#xff0c;配置为轻量2核4G5M、5M带宽、60GB SSD盘、500GB月流量、上海/广州/北京&#xff0c;腾讯云优惠活动 yunfuwuqiba.com/go/txy 腾讯云轻量2核4G5M服务器租用价格 腾讯云&#xff1a;轻量应用服务器1…

RecyclerView 调用 notifyItemInserted 自动滚动到底部的问题

项目中发现一个奇怪的现象 RecyclerView 加载完数据以后&#xff0c;调用 notifyItemInserted 方法&#xff0c;RecyclerView 会滑动到底部。 简化后的效果图&#xff1a; 因为这个 RecyclerView 的适配器有一个 FootViewHolder&#xff0c;所以怀疑是 FootViewHolder 的问题…

Linux中常用命令(文件、目录和文件压缩)及功能示例

一、Linux关于文件与目录的常用命令及其功能示例 命令: ls 全名: List (列表) 常用选项: -l: 详细列表格式&#xff0c;显示详细信息。-a: 显示所有文件&#xff0c;包括隐藏文件。 功能: 列出目录内容。 示例: ls -la /home 此命令以详细格式列出/home目录中的所有文件&#x…

推荐一本牛逼的入门 Python书!,如何试出一个Python开发者真正的水平

本书详细解说了 Python 语言和编程的本质&#xff0c;无论你是否接触过编程语言&#xff0c;只要是 Python 编程的初学者&#xff0c;都可阅读本书。 本书讲解的内容虽然基础&#xff0c;但并不简单。本书提供了 165 幅图表&#xff0c;可以让大家能够轻松地理解并掌握复杂的概…

踏入网页抓取的旅程:使用 grequests 构建 Go 视频下载器

引言 在当今数字化的世界中&#xff0c;网页抓取技术变得越来越重要。无论是获取数据、分析信息&#xff0c;还是构建自定义应用程序&#xff0c;我们都需要从互联网上抓取数据。本文将介绍如何使用 Go 编程语言和 grequests 库来构建一个简单的 Bilibili 视频下载器&#xff…

多线程(22)Executor`框架

Executor框架是Java提供的一套高级的线程管理机制&#xff0c;它在java.util.concurrent包中。这个框架旨在简化并发编程&#xff0c;提供了线程池管理、任务调度、异步计算等功能&#xff0c;让开发者能够更加专注于任务的执行逻辑&#xff0c;而不是线程的管理和调度。 核心…

UE4_碰撞_射线检测不到物体原因及跳不到圈内的问题

UseSimpleAsComplex 和 UseComplexAsSimple 标记的作用和使用时间。 虚幻引擎 4 中有简单和复杂碰撞形态。 简单碰撞 是基础&#xff0c;如盒体、 球体、胶囊体和凸包。 复杂碰撞 是给定对象的三角网格图。 虚幻引擎 4 会默认创建简单和复杂两种形态&#xff0c;然后基于用户需…

gan zoo: 最新GAN 相关paper/code收集

相关推荐&#xff1a; 简单实现 GAN 简单实现 DCGAN 简单实现 InfoGAN 简单实现 Pix2Pix 一文带你读懂概率生成模型 GPT-1/GPT-2/GPT-3简介 GPT从0到1构建(附视频代码链接) 一文带你读懂变分自编码器(VAEs) 文本引导图像生成模型的演变(DALLE/CLIP/GLIDE) 作者对迄今为止所有的…

软考 系统架构设计师系列知识点之云原生架构设计理论与实践(10)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之云原生架构设计理论与实践&#xff08;9&#xff09; 所属章节&#xff1a; 第14章. 云原生架构设计理论与实践 第2节 云原生架构内涵 14.2 云原生架构内涵 关于云原生的定义有众多版本&#xff0c;对于云原生架构的…

Java类和对象练习题

练习一 下面代码的运行结果是&#xff08;&#xff09; public static void main(String[] args){String s;System.out.println("s"s);} 解析&#xff1a;本题中的代码不能编译通过&#xff0c;因为在Java当中局部变量必须先初始化&#xff0c;后使用。所以此处编译不…

Playwright库page.evaluate()方法执行JavaScript 表达式

page.evaluate() 方法是 Playwright 中常用的方法之一&#xff0c;用于在页面上下文中执行 JavaScript 代码。它允许在浏览器环境中执行各种操作&#xff0c;如操作 DOM 元素、获取页面数据、执行复杂的计算等&#xff0c;并将结果返回到 Node.js 或 Python 代码中。 在 Playw…