v-if控制div内容显示,克隆这个div但是v-if没有效果

问题描述:

我的子页面打印的时候通过isPdf来隐藏“选择参加人员”按钮。

我子页面有个el-dialog,el-dialog里面有个大的div它的id为app-pre-meet-add,在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.$refs.child.controlPdf(true)来调用子页面的controlPdf方法使得子页面的isPdf变成true,然后通过下面的代码来克隆子页面的id为app-pre-meet-add的div:

  this.$refs.child.controlPdf(true);const container = document.getElementById("app-pre-meet-add");// 克隆父元素(深刻隆)const clonedParent = container.cloneNode(true);clonedParent.setAttribute("class", "cloned-app-pre-meet-add-class");container.parentNode.insertBefore(clonedParent, container.nextSibling);// 查找所有带有 hidden 类的子元素 form,并在克隆的元素中移除 hidden 类const clonedHiddenForms = clonedParent.querySelectorAll(".hidden");clonedHiddenForms.forEach((form) => {form.classList.remove("hidden");});

理论上这个新克隆的div应该是有子页面div在isPdf为true情况下的状态,但是为什么isPdf没有用

原因:

这个问题的根源在于cloneNode方法的行为。当你克隆一个DOM元素时,你得到的是该元素在那一刻的快照,包括它的所有子元素和属性。但是,这个方法不会克隆与该元素相关联的JavaScript状态或事件监听器。在你的情况下,isPdf可能是一个响应式数据属性或者计算属性,它控制着el-dialog中某些元素的显示或隐藏。当你克隆div时,你只是复制了它的静态结构,而没有复制Vue实例中的响应式状态。


解决方法:

使用Vue的ref$nextTick
你可以在子组件的div上使用ref,并在父组件中通过$refs访问它。然后,你可以在父组件中调用一个方法来改变isPdf的状态,并使用$nextTick来确保DOM已经被更新。在$nextTick的回调函数中,你可以克隆div

就是使用nextTick!!!

appPreAdd(formText, vdata, flag, res) {this.$refs.child.controlPdf(true);this.$nextTick(async () => {const container = document.getElementById("app-pre-meet-add");// 克隆父元素(深刻隆)const clonedParent = container.cloneNode(true);clonedParent.setAttribute("class", "cloned-app-pre-meet-add-class");container.parentNode.insertBefore(clonedParent, container.nextSibling);// 查找所有带有 hidden 类的子元素 form,并在克隆的元素中移除 hidden 类const clonedHiddenForms = clonedParent.querySelectorAll(".hidden");clonedHiddenForms.forEach((form) => {form.classList.remove("hidden");});await htmlToPdftoFile.getPdfFromHtml(".cloned-app-pre-meet-add-class",formText,"add",res.data.data,new Date(vdata.createTime),this.checkFormTypeList[flag]);container.parentNode.removeChild(clonedParent);this.$refs.child.controlPdf(false);});},

最新问题:

这个问题就是await后面要跟promise,我没注意。

可以看到await修饰 this.appPreAdd方法

解决:

appPreAdd(formText, vdata, flag, res) {return new Promise((resolve, reject) => {this.$refs.child.controlPdf(true);this.$nextTick(async () => {try {const container = document.getElementById("app-pre-meet-add");const clonedParent = container.cloneNode(true);clonedParent.setAttribute("class", "cloned-app-pre-meet-add-class");container.parentNode.insertBefore(clonedParent,container.nextSibling);const clonedHiddenForms = clonedParent.querySelectorAll(".hidden");clonedHiddenForms.forEach((form) => {form.classList.remove("hidden");});// 等待 PDF 生成完成await htmlToPdftoFile.getPdfFromHtml(".cloned-app-pre-meet-add-class",formText,"add",res.data.data,new Date(vdata.createTime),this.checkFormTypeList[flag]);container.parentNode.removeChild(clonedParent);this.$refs.child.controlPdf(false);// 成功完成,解析 Promiseresolve();} catch (error) {// 发生错误,拒绝 Promisereject(error);}});});},

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

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

相关文章

常用电容功能以及型号

电容在电子电路中具有多种重要作用,以下是其主要功能: 1. **隔直流、通交流**:电容器对直流电压有阻断作用(理想情况下完全阻止直流通过),而对于交流信号则可以允许通过。这是因为电容器可以通过充放电过程…

分布式缓存

分布式缓存 缓存雪崩 缓存雪崩我们可以简单的理解为:由于原有缓存失效,新缓存未到期间所有原本应该访问缓存的请求都去查询数据库了,而对数据库 CPU 和内存造成巨大压力,严重的会造成数据库宕机。从而形成一系列连锁反应&#xf…

225.【2023年华为OD机试真题(C卷)】游戏分组(DFS深度优先搜索-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-游戏分组二.解题思路三.题解代码Python题解代码…

C++与Typescript的区别

目录 一、C类模板和函数模板 1.类模板 2.函数模板 二,Typescript 的泛型声明 1.泛型函数 2.泛型类 为什么C和Typescript语言中主张模板和泛型 一、C类模板和函数模板 在C中,类模板和函数模板允许你为多种数据类型编写通用的代码。这就像每个人都有…

uniapp如何封装接口

在uniapp中封装接口可以使用uni.request方法,示例代码如下: // 封装接口 export function getGoodsList(params) {return new Promise((resolve, reject) > {uni.request({url: http://api.example.com/goods,method: GET,data: params,success: res…

山西电力市场日前价格预测【2024-01-14】

日前价格预测 预测说明: 如上图所示,预测明日(2024-01-14)山西电力市场全天平均日前电价为415.13元/MWh。其中,最高日前电价为851.84元/MWh,预计出现在18:15。最低日前电价为198.87元/MWh,预计…

使用 C++/WinRT 创作 API

如果 API 位于 Windows 命名空间中 这是你使用 Windows 运行时 API 最常见的情况。 对于元数据中定义的 Windows 命名空间中的每个类型,C/WinRT 都定义了 C 友好等效项(称为投影类型 )。 投影类型具有与 Windows 类型相同的完全限定名称&…

【LabVIEW FPGA入门】使用CompactRIO进行SPI和I2C通信

NI提供了 SPI and I2C Driver API:下载SPI and I2C Driver API - NI 该API使用FPGA数字I / O线与SPI或I2C设备进行通信。 选择数字硬件时,要考虑三个选项: NI Single-Board RIO硬件可同时使用SPI和I2C驱动程序。NI 9401 C系列模块与SPI驱动程…

类中,构造方法、普通方法、类方法、静态方法和魔术方法的区别

class ExampleClass:class_variable "I am a class variable"# 构造方法(Constructor)def __init__(self, instance_variable):self.instance_variable instance_variable# 普通方法(Method)def instance_method(self…

大型语言模型,用最少的数学和行话进行解释

本文来自于《Large language models, explained with a minimum of math and jargon》,不嵌入任何笔者的个人理解,只是对原文的总结与记录。 文章作者是Tim Lee和Sean Trott,Tim Lee是一位拥有计算机科学硕士学位的记者,Sean Trot…

【二十】【动态规划】879. 盈利计划、377. 组合总和 Ⅳ、96. 不同的二叉搜索树 ,三道题目深度解析

动态规划 动态规划就像是解决问题的一种策略,它可以帮助我们更高效地找到问题的解决方案。这个策略的核心思想就是将问题分解为一系列的小问题,并将每个小问题的解保存起来。这样,当我们需要解决原始问题的时候,我们就可以直接利…

关于jupyter突然打不开的问题

好久没有用python了,我的电脑环境是安装过anaconda和pycharm,但是有些简单的东西就希望在jupyter中测试一下,但是最近发现jupyter打不开了。 具体是: 在这里打开jupyter是可以的,但是在命令行就不行,表现为…

计算机毕业设计 | SpringBoot+vue的家庭理财 财务管理系统(附源码)

1,绪论 1.1 项目背景 网络的发展已经过去了七十多年,网络技术的发展,将会影响到人类的方方面面,网络的出现让各行各业都得到了极大的发展,为整个社会带来了巨大的生机。 现在许多的产业都与因特网息息相关&#xff…

Python实现华容道问题详解

概要 华容道是一种古老的中国益智游戏,最早出现在中国的《千古文馆》中。这个游戏的目标是将一块特殊的方块从一个方形的棋盘中移出,通过滑动其他的方块来达到这个目标。本文将介绍如何使用Python来实现华容道问题,并提供详细的代码示例。 游…

飞鱼CRM接入第三方系统 飞鱼API对接详细教程

场景描述 在白码低代码开发平台中,是支持外部crm系统的线索通过接口流入到白码系统里面,换而言之,只要外部的系统有线索api接口,白码系统可以接收线索并在白码系统上进行后续操作。本文以飞鱼crm系统为例,讲解如何接收…

DEJA_VU3D - Cesium功能集 之 115-雷达扫描(靶心效果)

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(每篇博文都会奉上完整demo的源代码…

学习就要从简单的开始嘛,开始学一个个人博客吧

做一个个人博客第一步该怎么做? 好多零基础的同学们不知道怎么迈出第一步。 那么,就找一个现成的模板学一学呗,毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题,那就是,那些模板都,太!…

Linux/Haystack

Enumeration nmap 还是先看看端口对外开放情况,对外开放了22,80,9200 22应该是ssh,80是web,9200不知道是什么 TCP/80 访问web,没有什么链接,只有一张图片 有可能图片中有些东西,但还是尝试扫描一下网站…

ptaR7-6/zzuli2106 有去有回

题目 输入n个整数,第一趟按从左到右间隔k个数取数据,然后第二趟再从右到左间隔k-1个数取余下的数,如果数据没有取完,下一趟再间隔k-2个从左到右取数据,如此反复,直到所有的数据取完为止。注意:…

《SRE Google 运维解密》笔记

指导思想 介绍 Google 生产环境介绍 borg 是 k8s 的前身。 拥抱风险 服务质量 现在的 SLO 没有更细粒度的划分到季度 如果划分到季度,需要用这个数据来限制什么或者进行什么活动? L1S 链路的 SLA 的签署工作已经做了很多 对于 SLA 的达成情况数据没有…