Elementplus报错 [ElOnlyChild] no valid child node found

 报错描述: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.mzph.cn/news/674193.shtml

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

相关文章

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…

SpringBoot之事务源码解析

首先事务是基于aop的&#xff0c;如果不了解aop的&#xff0c;建议先去看下我关于aop的文章: Spring之aop源码解析  先说结论&#xff0c;带着结论看源码。首先&#xff0c;在bean的生命周期中&#xff0c; 执行实例化前置增强&#xff0c;会加载所有切面并放入缓存&#xff0…

Centos 7.5 安装 NVM 详细步骤

NVM&#xff08;Node Version Manager&#xff09;是一个用于管理Node.js版本的工具&#xff0c;它可以让你轻松地在多个版本之间切换。NVM 通过下载和管理 Node.js 的多个版本&#xff0c;为用户提供了一种灵活的方式来使用不同版本的 Node.js。如果你需要更多关于NVM的信息&a…

1 月 Web3 游戏行业概览:市场实现空前增长

作者&#xff1a;lesleyfootprint.network 今年一月&#xff0c;区块链游戏领域迎来了爆发式增长&#xff0c;活跃用户的数量大幅提升。 区块链游戏不断融合 AI 技术&#xff0c;旨在提升玩家体验并扩大其服务范围&#xff0c;公链与游戏的兼容性问题也日渐受到重视。技术革新…

Python进阶--爬取下载人生格言(基于格言网的Python3爬虫)

目录 一、此处需要安装第三方库: 二、抓包分析及Python代码 1、打开人生格言网&#xff08;人生格言-人生格言大全_格言网&#xff09;进行抓包分析 2、请求模块的代码 3、抓包分析人生格言界面 4、获取各种类型的人生格言链接 5、获取下一页的链接 6、获取人生格言的…

canvas实现涂鸦画板功能

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

路由引入路由过滤排错

目录 排错网络拓扑图 排错需求 故障排错 故障一 故障二 故障三 排错网络拓扑图 排错需求 按照图示配置 IP 地址&#xff0c;总部和分支 A、分支 B 各自使用 loopback 口模拟业务网段公司业务流分为 A 流和 B 流&#xff0c;网段如图所示总部内部配置 OSPF 互通&#xff0…

《MySQL 简易速速上手小册》第2章:数据库设计最佳实践(2024 最新版)

文章目录 2.1 规划高效的数据库架构2.1.1 基础知识2.1.2 重点案例2.1.3 拓展案例 2.2 数据类型和表设计2.2.1 基础知识2.2.2 重点案例2.2.3 拓展案例 2.3 索引设计原则2.3.1 基础知识2.3.2 重点案例2.3.3 拓展案例 2.1 规划高效的数据库架构 在开启我们的数据库设计之旅之前&a…

【数据分享】1929-2023年全球站点的逐年平均风速(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…

Ubuntu 22 部署Zabbix 6.4

一、安装及配置postgresql sudo apt-get update sudo apt-get install postgresql postgresql-client 修改配置文件&#xff0c;配置远程访问&#xff1a;&#xff08;PostgreSQL安装路径下的data&#xff0c;也是安装时data的默认路径&#xff09;data目录下的 pg_hba.conf …

大数据 - Spark系列《五》- Spark常用算子

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…

实践个人知识管理的3件事 | 知识管理

太久没有写文章&#xff0c;虽说这段时间积累得不少&#xff0c;可说得很多&#xff0c;但确实有点儿“不知道该从何说起”的困惑&#xff0c;总感觉说啥都接不上之前的话茬儿……sigh&#xff0c;没事儿&#xff0c;就当是瞎聊天儿吧。 话说&#xff0c;最近帮朋友实践和落地个…

【数据结构】链表OJ面试题4(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 给定一个链表&#xff0c;判断链表中是否有环。http://t.csdnimg.cn/Rcdyc 记录每天的刷题&#xff0c;继续坚持&#xff01; 2.OJ题目训练 10. 给定一个链表&#xff0c;返回链表开始…

【多模态大模型】GLIP:零样本学习 + 目标检测 + 视觉语言大模型

GLIP 核心思想GLIP 对比 BLIP、BLIP-2、CLIP 主要问题: 如何构建一个能够在不同任务和领域中以零样本或少样本方式无缝迁移的预训练模型&#xff1f;统一的短语定位损失语言意识的深度融合预训练数据类型的结合语义丰富数据的扩展零样本和少样本迁移学习 效果 论文&#xff1a;…

深入浅出:Golang的Crypto/SHA256库实战指南

深入浅出&#xff1a;Golang的Crypto/SHA256库实战指南 介绍crypto/sha256库概览主要功能应用场景库结构和接口实例 基础使用教程字符串哈希化文件哈希化处理大型数据 进阶使用方法增量哈希计算使用Salt增强安全性多线程哈希计算 实际案例分析案例一&#xff1a;安全用户认证系…

09 AB 10串口通信发送原理

通用异步收发传输器&#xff08; Universal Asynchronous Receiver/Transmitter&#xff0c; UART&#xff09;是一种异步收发传输器&#xff0c;其在数据发送时将并行数据转换成串行数据来传输&#xff0c; 在数据接收时将接收到的串行数据转换成并行数据&#xff0c; 可以实现…

针对LLM大模型承载网发布星智AI网络解决方案

人工智能是数字经济的核心驱动力&#xff0c;AI 大模型是人工智能的新引擎。近年来&#xff0c;随着 ChatGPT 等生成式人工智能&#xff08;AIGC&#xff09;的突飞猛进&#xff0c;业内领军企业竞相推出万亿、10 万亿参数量级别的大模型&#xff0c;还对底层 GPU 支撑规模提出…

ad18学习笔记十八:如何放置丝印层敷铜?

我画板的时候&#xff0c;需要把板卡顶面丝印层的一个矩形区域&#xff0c;画成白色&#xff0c;但是这个区域内有好几个焊盘&#xff0c;丝印涂色的地方需要避开这几个焊盘&#xff0c;我觉得不能简单的在丝印层画一个矩形完事&#xff0c;最好让丝印层的这个区域&#xff0c;…

通过平扫CT实现胰腺癌早筛(平扫CT+AI)

Large-scale pancreatic cancer detection via non-contrast CT and deep learning - PubMed (nih.gov) 实验团队&#xff1a;海军军医大学第一附属医院&#xff08;上海长海医院&#xff09;&#xff0c;放射诊断科曹凯主治医生为共同第一作者&#xff0c;邵成伟、陆建平等教…

Spring 的奇幻起源:从 IoC 容器到 Bean 的魔法世界 ✨

目录 什么是 Spring&#xff1f;为什么它如此流行&#xff1f; IoC 容器&#xff1a;从“依赖倒置”到“控制反转” Bean&#xff1a;IoC 容器中的基本组件 Spring 中的配置方式&#xff1a;XML、注解和 JavaConfig Bean 的作用域和生命周期管理 Bean 的属性装配和自动装配…