el-dialog弹窗的@open方法中,第一次引用ref发现undefined问题,第二次后面又正常了

news/2025/1/20 2:21:03/

解决方法
直接不用这个@open方法,转而用@opened,代码例子:

<el-dialog title="单个新增" :visible.sync="PlacardShowSingle" @opened="openpbSingle()" width="1100px" top="1%" :close-on-click-modal="false"><div style="margin:20px; margin-top: -20px;"><PbscheduleSingle ref="PbscheduleSingle"></PbscheduleSingle></div>
</el-dialog>

方法例子:

//弹窗完全挂载dom后再调用
openpbSingle() {// 调用PbscheduleSingle组件的方法QueryPublishNumberQuantitythis.$refs.PbscheduleSingle.QueryPublishNumberQuantity(); 
},

情况大致是:
1.第一次打开没调用组件内部方法,发现是undefined,@open 在对话框打开之前触发,并且ref="PbscheduleSingle",这个ref没挂载在dom,自然无法获取到相应的方法。

2.第二次打开,由于第一次打开,ref已经挂载在dom了,所以一切又正常了

3. @opened 在对话框完全打开之后触发,组件已经完全挂载,所以不会出现undefined的错误。

还有其他方法可以解决,但是这个应该是最简洁明了的吧。


http://www.ppmy.cn/news/1564551.html

相关文章

【Leetcode 热题 100】45. 跳跃游戏 II

问题背景 给定一个长度为 n n n 的 0 0 0 索引 整数数组 n u m s nums nums。初始位置为 n u m s [ 0 ] nums[0] nums[0]。 每个元素 n u m s [ i ] nums[i] nums[i] 表示从索引 i i i 向前跳转的最大长度。换句话说&#xff0c;如果你在 n u m s [ i ] nums[i] nums[i…

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成 1所有的材料都可以在EAMM: One-Shot Emotional Talking Face via Audio-Based Emotion-Aware Motion Model网站上找到。 摘要 尽管音频驱动的对话人脸生成技术已取得显著进展&#xff0c;但现有方法要么忽…

JAVA实现五子棋小游戏(附源码)

文章目录 一、设计来源捡金币闯关小游戏讲解1.1 主界面1.2 黑棋胜利界面1.3 白棋胜利界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载更多优质源码分享 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/145161039 JA…

IT程序设计文档,软件需求设计文档,详细设计模板(Word原件)

1引言 1.1编写目的 1.2项目背景 1.3参考材料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4设计目标 2.5.1总体原则 2.5.2实用性和先进性 2.5.3标准化、开放性、兼容性 2.5.4高可靠性、稳定性 2.5.5易用性 2.5.6灵活性和可扩展性 2.5.7经济性…

vue v-if和key值的注意的地方

v-if的使用 v-if 用来判断元素的显示与隐藏&#xff0c; 与v-show的相同和区别&#xff1a; v-if和v-show 为true 都占据位置&#xff0c;为false都不占有位置 控制手段&#xff1a;v-if 通过删除和添加dom结构进行显示和隐藏&#xff0c;v-show通过css的display&#xff1…

openssl s_server源码剥离

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

Web3与加密技术的结合:增强个人隐私保护的未来趋势

随着互联网的快速发展&#xff0c;个人隐私和数据安全问题越来越受到关注。Web3作为新一代互联网架构&#xff0c;凭借其去中心化的特性&#xff0c;为个人隐私保护提供了全新的解决方案。而加密技术则是Web3的重要组成部分&#xff0c;进一步增强了隐私保护的能力。本文将探讨…

LINUX 内核设计于实现 阅读记录(2025.01.14)

文章目录 一、内核历史1、内核简介2、LINUX 内核与 UNIX 内核比较3、LINUX内核版本命名 二、从内核出发1、获取内核源码&#xff08;1&#xff09;查看Linux内核版本 uname -r&#xff08;2&#xff09;下载源码 https://www.kernel.org/&#xff08;3&#xff09;编译内核 2、…