this.$nextTick与this.$set,解决拖拽表格没有刷新问题!

一:this.$nextTick的用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

原因是,Vue是异步执行DOM更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

简单来说就是你桌上有一个盒子,盒子里面装着一个苹果,我们console.log(this.盒子),会拿到苹果。但是我们给盒子一个点击事件,点击的时候,把苹果变成香蕉,此时我们去加一个console.log(this.盒子),会拿到苹果。再加一个

this.$nextTick(function () {
                    console.log(this.盒子)
                })则会拿到香蕉。

当时我想利用这个方法,解决表格不刷新的问题,但是忽略了另外一个问题,表格的数据是层次深的数组,需要使用深拷贝转换一下,直接赋值的话,只能改变值,不能改变地址。

二:this.$set可以实现动态为data中的对象添加具有响应式效果的属性

用法:
Vue.set( target, key, value )
调用方法:this.$set( target, key, value )
 
//参数
target:要更改的数据源(可以是对象或者数组)
key:要更改或者新增属性的具体数据 (对象的key为键,数组的key为下标)
value :重新赋的值
 
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
 
应用场景:
需要为data对象添加一个新属性时或修改某个属性的值时,却没有更新到视图上,这个时候就用$set解决

 // 给数组层次较深的数据赋值,使用深拷贝,
//另外,使用set把tableData的索引替换成targetObject,解决刷新表格内容!if (resData.Data.length > 0) {const targetObject = JSON.parse(JSON.stringify(this.tableData[this.addIndex]));targetObject.SimuCadres.map(item => {if (item.CadreID == this.addOneCadreID) {item.DisplayInformation = true;}});this.$set(this.tableData, this.addIndex, targetObject);this.$nextTick(() => {this.$refs.tableDataAgain[0].doLayout();});}

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

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

相关文章

kubernetes(k8s)容器内无法连接同所绑定的Service ClusterIP问题记录

kubernetes(k8s)容器内无法连接同所绑定的Service ClusterIP问题记录 1. k8s环境 k8s使用kubernetes-server-linux-amd64_1.19.10.tar.gz 二进制bin 的方式手动部署 k8s 版本: [rootmaster ~]# kubectl version Client Version: version.Info{Major:"1", Minor:&…

CentOS7安装RabbitMQ

服务器系统版本:CentOS7 安装RabbitMq版本:3.7.18 将此安装包目录下的两个文件上传到服务/usr/local/rabbitmq中备用。 安装Erlang依赖包 rpm -ivh erlang-22.0.7-1.el7.x86_64.rpm安装RabbitMQ安装包(需要联网) yum install -y rabbitmq-server-3.7.1…

yml转properties工具

目前搜索到的大部分代码都存在以下问题: 复杂结构解析丢失解析后顺序错乱 所以自己写了一个,经过不充分测试,基本满足使用。可以直接在线使用 在线地址 除了yml和properties互转之外,还可以生成代码、sql转json等,可…

深入解析进程

在现代计算机系统中,进程是一个核心概念,它代表了程序的执行实例。通过并发执行多个进程,计算机能够提高效率和资源利用率。 1. 进程的概念 进程是指在计算机系统中正在执行的程序的实例。每个进程都有自己的地址空间、寄存器集合、堆栈和文…

【Linux】OpenSSH 命令注入漏洞(CVE-2020-15778)(iptables屏蔽22端口方式)

背景 漏洞名称:OpenSSH 命令注入漏洞(CVE-2020-15778) 详细描述:OpenSSH(OpenBSD Secure Shell)是OpenBSD计划组的一套用于安全访问远程计算机的连接工具。该工具是SSH协议的开源实现,支持对所有的传输进行加密&#…

java:lombok库方便的使用@Getter和@Setter

背景 Lombok是一个Java库,它通过注解减少了大量常规代码,例如getter和setter方法,equals,hashCode,toString等方法。使用Lombok可以减少模板代码的编写,使代码更简洁,更易于阅读和维护。 常用…

DaVinci Resolve Studio达芬奇软件 18.6.3

DaVinci Resolve Studio 18是一款专业的视频编辑和调色软件,适用于电影、电视节目、广告等各种视觉媒体的制作。它具有完整的后期制作功能,包括剪辑、调色、特效、音频处理等。 以下是DaVinci Resolve Studio 18的主要特点: - 提供了全面的视…

Go map类型

一、map介绍 1、map说明 map是一种无须的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能使用Go语言中map的定义语法如下:map[KeyType]ValueType其中 KeyType:表示键的类型ValueType:表示键对应的值…

CAN网络出现错误帧从哪些方面去分析解决

标题:CAN网络出现错误帧从哪些方面去分析 实例1: 断电重启后,会有错误帧产生。 检查方案: 查看收发模块的初始化、使能是否在发送CAN报文之前完成? 实例2: 周期性报文,有时会冒出一帧错误帧&…

[Java][单列集合具体操作]以ArrayList为例讲解“增”“删”“查”“改”操作

我们来研究List系列的集合 List相较于set 优势在于: 1.有序的 2.有索引的 3.可重复的 这里最关键的是2.有索引的:因为这点我们可以做更多拓展性的操作 List是Collection中的一种 Collection中的方法List都继承了 索引拓展出的方法 是add(索引位置&#x…

【接口自动化】selenium库也有大用场(获取cookie)

相信有些童鞋在做接口、或者说接口自动化测试的过程中会遇到这样的场景:测试的接口,必须是需要登录后才能发起请求成功的。 那么怎么解决呢? 本着团队协作的精神,我们就去让开发同学开个后门,给你个“万能”值&#x…

基层管理人员的薪酬结构设计及分析

人力资源经理们经常面对这样的难题:怎么用相同的工资水平更好的保留和发展基层管理人员?要解决这个难题,第一要明确企业的付薪理念,选择相应的基层管理人员薪酬结构类型;第二要确定合理的针对基层管理人员的薪酬结构比…

Condition 源码解析

Condition 源码解析 文章目录 Condition 源码解析一、Condition二、Condition 源码解读2.1. lock.newCondition() 获取 Condition 对象2.2. condition.await() 阻塞过程2.3. condition.signal() 唤醒过程2.4. condition.await() 被唤醒后 三、总结 一、Condition 在并发情况下…

【网络奇遇之旅】:那年我与计算机网络的初相遇

🎥 屿小夏 : 个人主页 🔥个人专栏 : 计算机网络 🌄 莫道桑榆晚,为霞尚满天! 文章目录 一. 前言二. 计算机网络的定义三. 计算机网络的功能3.1 资源共享3.2 通信功能3.3 其他功能 四. 计算机网络…

pta找鞍点—C语言

7-13 找鞍点 分数 300 全屏浏览题目 切换布局 作者 C课程组 单位 浙江大学 一个矩阵元素的“鞍点”是指该位置上的元素值在该行上最大、在该列上最小。 本题要求编写程序,求一个给定的n阶方阵的鞍点。 输入格式: 输入第一行给出一个正整数n(1…

基于APM(PIX)飞控和missionplanner制作遥控无人车-从零搭建自主pix无人车无人履带车坦克-2(以乐迪crossflight飞控为例)

这里重点以乐迪crossflight飞控为例进行组装调试。 1.刷写固件 安装最新版的乐迪地面站,在官网可以下载。由于产品里面不好找到对应的飞控,可以在首页滑动图片里进入。 1.连接飞控和电脑,查看com口,安装驱动。 2.刷写固件。如果…

第十一章 python基础之api

Python基础、函数、模块、面向对象、网络和并发编程、数据库和缓存、 前端、django、Flask、tornado、api、git、爬虫、算法和数据结构、Linux、设计题、客观题、其他 第十一章 api 1. 什么是webservice? Web服务(Web Services)是一种通过网…

Web实现悬浮球-可点击拖拽禁止区域

这次要实现的是这种效果,能够在页面上推拽和点击的,拖拽的话,就跟随鼠标移动,点击的话,就触发新的行为,当然也有指定某些区域不能拖拽,接下来就一起来看看有什么难点吧~ 需要监听的鼠标事件 既…

理解DALL-E 2

1.简介 DALL-E 2的效果想必大家都已经很清楚了,效果是非常惊人的,该篇文章就是讲一下DALL-E 2的原理是什么。 2.方法 DALL-E 2的原理不难理解,前提是你知道CLIP。简单来说,CLIP是一个由文本和图片多模态训练的一个zero-shot模型…

【SpringBoot3+Vue3】六【完】【番外篇】- (0-1临摹)

目录 一、后端 1、服务器管理 1.1 ProjectController 1.2 ProjectService 1.3 ProjectServiceImpl 1.4 ProjectMapper 1.5 实体类 2、项目管理 2.1 ServerManageController 2.2 ServerManageService 2.3 ServerManageServiceImpl 2.4 ServerManageMapper 2.5 Serv…