Elementplus报错 [ElOnlyChild] no valid child node found

news2024/9/25 9:37:56

 报错描述:ElementPlusError: [ElOnlyChild] no valid child node found

问题复现(随机例子):

<el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button v-if="isClick">点击测试</el-button>
      </template>
      
    <div>测试</div>
 </el-popover>

上面代码中的 isClick 是 onMounted 中调用接口来获取的值,注意:无默认值的情况下才能出现问题。

出现原因:

        大概是在页面中使用了elementplus组件中的slot插槽(在插槽中加了v-if判断),执行代码的时候会去检测你的每个元素(包括子元素),渲染页面到插槽的时候,v-if判断可能还没有渲染出来,elementplus这个时候就会报出警告,提醒你这个地方可能有问题。

源码如下图:

解决方法:

        在要使用slot插槽的elementplus组件外面包裹一层 template 或者div ,这样会先执行条件判断逻辑,判断逻辑成立,才会渲染包裹在里面的elementplus组件。

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

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

相关文章

Linux介绍和命令使用

目录 目录 一、Linux简介 1.1 主流操作系统 1.2 Linux 发展历史 1.3 Linux系统版本 二、Linux安装 三、Linux 目录结构 四、Linux常用命令 4.1 基础常用命令说明 4.2 Linux 命令使用技巧 4.3 Linux 命令格式 4.4 进阶重点常用命令 4.4.1 拷贝移动命令 4.4.2 打包…

Linux下库函数、静态库与动态库

库函数 什么是库 库是二进制文件, 是源代码文件的另一种表现形式, 是加了密的源代码; 是一些功能相近或者是相似的函数的集合体. 使用库有什么好处 提高代码的可重用性, 而且还可以提高程序的健壮性;可以减少开发者的代码开发量, 缩短开发周期. 库制作完成后, 如何给用户…

【原创】Qt库open62541 MinGW编译

一、前言 为了统一公司的驱动层开发&#xff0c;准备采用OpcUA的方式转发底层数据&#xff0c;而服务器有Windows Server&#xff0c;也有CentOS&#xff0c;因此想用Qt开发一个基于MinGW的OpcUA Server&#xff0c;这样就能跨平台部署。这里记录一下&#xff0c;希望对你也有用…

【人工智能】人工智能 – 引领未来科技的潮流

写在前面 引言红利挑战结论 引言 人工智能是指使计算机系统表现出类似于人类智能的能力。其目标是实现机器具备感知、理解、学习、推理和决策等智能行为。人工智能的发展可以追溯到上世纪50年代&#xff0c;随着计算机技术和算法的不断进步&#xff0c;人工智能得以实现。 今天…

在C++的union中使用std::string(非POD对象)的陷阱

struct和union的对比 union最开始是C语言中的关键字&#xff0c;在嵌入式中比较常见&#xff0c;由于嵌入式内存比较稀缺&#xff0c;所以常用union用来节约空间&#xff0c;在其他需要节省内存的地方也可以用到这个关键字&#xff0c;写一个简单程序来说明union的用途 struc…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Stepper组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Stepper组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Stepper组件 鸿蒙&#xff08;HarmonyOS&#xff09;仅能包含子组件StepperIte…

SpringBoot和SpringMVC

目录 一、springboot项目 &#xff08;1&#xff09;创建springboot项目 &#xff08;2&#xff09;目录介绍 &#xff08;3&#xff09;项目启动 &#xff08;4&#xff09;运行一个程序 &#xff08;5&#xff09;通过其他方式创建和运行springboot项目 二、SpringMVC…

java学习06---方法

一 方法 方法&#xff08;method&#xff09;是程序中最小的执行单元 注意&#xff1a; 方法必须先创建才可以使用&#xff0c;该过程成为方法定义 方法创建后并不是直接可以运行的&#xff0c;需要手动使用后&#xff0c;才执行&#xff0c;该过程成为方法调用 二 方法的…

搭建macOS开发环境-1:准备工作

请记住&#xff1a; 最重要的准备工作永远是&#xff1a;备份数据 !!! 通过图形界面检查 Mac 的 CPU 类型&#xff1a; 在搭载 Apple 芯片的 Mac 电脑上&#xff0c;“关于本机”会显示一个标有“芯片”的项目并跟有相应芯片的名称&#xff1a; 通过命令行检查Mac的CPU类型 …

【Linux开发工具】yum命令详解

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.概念2.yum的配置信…

Spring Cloud使用ZooKeeper作为注册中心的示例

简单的Spring Cloud应用程序使用ZooKeeper作为注册中心的示例&#xff1a; 1.新建模块&#xff1a; 2.勾选依赖&#xff1a; 3.在pom.xml文件中做出部分修改及添加Spring Cloud Zookeeper 依赖版本&#xff1a; 完整pom文件 <?xml version"1.0" encoding&q…

FlinkSql通用调优策略

历史文章迁移&#xff0c;稍后整理 使用DataGenerator 提前进行压测&#xff0c;了解数据的处理瓶颈、性能测试和消费能力 开启minibatch&#xff1a;"table.exec.mini-batch.enabled", "true" 开启LocalGlobal 两阶段聚合&#xff1a;"table.exec.m…

如何修复Mac的“ kernel_task” CPU使用率过高的Bug?

当计算机开始缓慢运行时&#xff0c;这从来都不是一件有趣的事情&#xff0c;但是当您弄不清它为何如此缓慢时&#xff0c;甚至会变得更糟。如果您已经关闭了所有程序&#xff0c;并且Mac上的所有内容仍然感觉像是在糖蜜中移动&#xff0c;这可能是令人讨厌的kernel_task导致高…

HTTP2: springboot启用http2

springboot http2应用条件 使用servlet 4.0jdk 9tomcat 9 springboot 开启h2 创建证书 创建脚本&#xff1a; keytool -genkey -keyalg RSA -alias wisely -keystore keystore.jks -storepass pass1234 -validity 4000 -keysize 2048添加springboot配置 server:port: 808…

假虚Telegram网站传播远控窃密木马

前言 今天下午朋友突然微信找到我说使用Telegram之后电脑卡的不行&#xff0c;让我看看&#xff1a; 电脑变卡&#xff0c;如果不是软件或系统问题&#xff0c;要么就是中了挖矿&#xff0c;要么就是中了远控木马&#xff0c;拿到样本分析之后&#xff0c;可以确认&#xff0c…

电子电器架构 —— 网关测试脚本分析

电子电器架构 —— 网关测试 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何 消耗你的人和事,多看一眼都是你的不对。非…

vue3-内置组件-KeepAlive

KeepAlive <KeepAlive> 是一个内置组件&#xff0c;它的功能是在多个组件间动态切换时缓存被移除的组件实例。 基本使用 默认情况下&#xff0c;一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时&#xff0c;会创建…

猫头虎分享已解决Bug ‍ || TypeError: Cannot interpret ‘float‘ value as integer

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

【第二届 Runway短视频创作大赛】——截至日期2024年03月01日

短视频创作大赛 关于AI Fil&#xff4d; Festival竞赛概况参加资格报名期间报名方法 提交要求奖品附录 关于AI Fil&#xff4d; Festival 2022年成立的AIFF是一个融合了最新AI技术于电影制作中的艺术和艺术家节日&#xff0c;让我们得以一窥新创意时代的风采。从众多参赛作品中…

【人工智能】横扫市场的巨星大模型:探秘当今最热门的AI力量

今年&#xff0c;ChatGPT成了大家的明星&#xff0c;简直是个神奇的助手&#xff01;问什么问题&#xff0c;都秒回&#xff0c;写各种文字、甚至代码&#xff0c;简直是工作利器。而国内这半年AI领域热度不减&#xff0c;涌现了一批新公司和产品&#xff0c;大厂也在风头上。A…