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.mfbz.cn/a/376068.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用navicat导出mysql离线数据后,再导入doris的方案

一、背景 doris本身是支持直接从mysql中同步数据的&#xff0c;但有时候&#xff0c;客户不允许我们使用doris直连mysql&#xff0c;此时就需要客户配合将mysql中的数据手工导出成离线文件&#xff0c;我们再导入到doris中 二、环境 doris 1.2 三、方案 doris支持多种导入…

2024:AI 大冒险

2024&#xff1a;AI 大冒险 2023 年就像一场疯狂的过山车&#xff0c;现在让我们一起系好安全带&#xff0c;来预测一下 2024 年的五大惊心动魄事件吧&#xff01; 一、AI 惹祸升级 嘿&#xff0c;2024 年可要小心了&#xff01;AI 这家伙可能会变得更调皮捣蛋。人们可能会用…

数据结构与算法之美学习笔记:51 | 并行算法:如何利用并行处理提高算法的执行效率?

目录 前言并行排序并行查找并行字符串匹配并行搜索总结引申 前言 本节课程思维导图&#xff1a; 时间复杂度是衡量算法执行效率的一种标准。但是&#xff0c;时间复杂度并不能跟性能划等号。在真实的软件开发中&#xff0c;即便在不降低时间复杂度的情况下&#xff0c;也可以…

re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面 没想到在CSS里也要再次了解这些颜色单位&#xff0c;感觉回到了大二的数字图像处理&#xff0c;可惜现在已经大四了&#xff0c;感觉并没有学会什么AI的东西 1. 颜色单位 预定义颜色名&#xff1a;HTML和CSS规定了147种颜色名。例如&#xff1a;red yellow green …

数据库管理-第146期 最强Oracle监控EMCC深入使用-03(20240206)

数据库管理145期 2024-02-06 数据库管理-第146期 最强Oracle监控EMCC深入使用-03&#xff08;20240206&#xff09;1 概览2 性能中心3 性能中心-Exadata总结 数据库管理-第146期 最强Oracle监控EMCC深入使用-03&#xff08;20240206&#xff09; 作者&#xff1a;胖头鱼的鱼缸&…

React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示

1、效果 2、环境准备 1、react18 2、antd 4 3、代码实现 原理&#xff1a;自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue&#xff0c;自定义tooltip通过监听echar的鼠标移入移出事件&#xff0c;判断tooltTip元素的显隐以及位置。 1、导入所需组…

JavaScript流程控制详解之顺序结构和选择结构

流程控制 流程控制&#xff0c;指的是控制程序按照怎样的顺序执行 在JavaScript中&#xff0c;共有3种流程控制方式 顺序结构选择结构循环结构 顺序结构 在JavaScript中&#xff0c;顺序结构是最基本的结构&#xff0c;所谓的顺序结构&#xff0c;指的是代码按照从上到下、…

数据结构之堆排序

对于几个元素的关键字序列{K1&#xff0c;K2&#xff0c;…&#xff0c;Kn}&#xff0c;当且仅当满足下列关系时称其为堆&#xff0c;其中 2i 和2i1应不大于n。 { K i ≤ K 2 i 1 K i ≤ K 2 i 或 { K i ≥ K 2 i 1 K i ≥ K 2 i {\huge \{}^{K_i≤K_{2i}} _{K_i≤K_{2i1}} …

《java 从入门到放弃》1.1 jdk 安装

1.jdk 是啥&#xff1f; jdk&#xff08;Java Development Kit&#xff09;&#xff0c;简单来说&#xff0c;就是java的开发工具。允许java 程序就是用它了。 jre &#xff0c;里面放的是java用的那些公用的包。 2.jdk下载 2.1 官网下载地址&#xff1a;Java Downloads | …

vue项目开发vscode配置

配置代码片段 步骤如下&#xff1a; 文件->首选项->配置用户代码片段新增全局代码片段起全局代码片段文件名“xxx.code-snippets” 这里以配置vue2初始代码片段为例&#xff0c;配置具体代码片段 {"name": "vue-sph","version": "…

07-使用Package、Crates、Modules管理项目

上一篇&#xff1a;06-枚举和模式匹配 当你编写大型程序时&#xff0c;组织代码将变得越来越重要。通过对相关功能进行分组并将具有不同功能的代码分开&#xff0c;您可以明确在哪里可以找到实现特定功能的代码&#xff0c;以及在哪里可以改变功能的工作方式。 到目前为止&…

2.6学习总结

2.6 1.蓝桥公园 2.路径 3.打印路径 4.【模板】Floyd Floyd算法&#xff1a; 是一种多源的最短路径算法&#xff0c;经过一次计算可以得到任意两个点之间的最短路径。 这种算法是基于动态规划的思想&#xff1a; m[i][j]表示从i到j这条边的距离&#xff0c;dp[k][i][j]表示从…

Docker的镜像和容器的区别

1 Docker镜像 假设Linux内核是第0层&#xff0c;那么无论怎么运行Docker&#xff0c;它都是运行于内核层之上的。这个Docker镜像&#xff0c;是一个只读的镜像&#xff0c;位于第1层&#xff0c;它不能被修改或不能保存状态。 一个Docker镜像可以构建于另一个Docker镜像之上&…

计算机网络——网络

计算机网络——网络 小程一言专栏链接: [link](http://t.csdnimg.cn/ZUTXU)前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c; [跳转到网站](https://www.captainbed.cn/qianqiu) 无线网络和移动网…

YOLOv8改进 | 基础篇 | 计算训练好权重文件对应的FPS、推理每张图片的平均时间(科研必备)

一、本文介绍 本文给大家带来的改进机制是利用我们训练好的权重文件计算FPS,同时打印每张图片所利用的平均时间,模型大小(以MB为单位),同时支持batch_size功能的选择,对于轻量化模型的读者来说,本文的内容对你一定有帮助,可以清晰帮你展示出模型速度性能的提升以及轻量…

2024PMP考试新考纲-近年PMP真题练一练和很详细解析(3)

今天华研荟继续为您分享和解析PMP真题&#xff0c;一方面让大家感受实际的PMP考试和出题形式&#xff0c;另一方面是通过较详细的解题思路和知识讲解帮助大家最后一个多月有效备考&#xff0c;一次性3A通过2024年PMP考试。 2024年PMP考试新考纲-近年真题随机练一练 (注&#x…

LeetCode 2641. 二叉树的堂兄弟节点 II:层序遍历并记下兄弟节点

【LetMeFly】2641.二叉树的堂兄弟节点 II&#xff1a;层序遍历并记下兄弟节点 力扣题目链接&#xff1a;https://leetcode.cn/problems/cousins-in-binary-tree-ii/ 给你一棵二叉树的根 root &#xff0c;请你将每个节点的值替换成该节点的所有 堂兄弟节点值的和 。 如果两个…

SparkJDBC读写数据库实战

默认的操作 代码val df = spark.read.format("jdbc").option("url", "jdbc:postgresql://localhost:5432/testdb").option("user", "username").option("password", "password").option("driver&q…

c#cad 创建-正方形(四)

运行环境 vs2022 c# cad2016 调试成功 一、程序说明 创建一个正方形&#xff0c;并将其添加到当前活动文档的模型空间中。 程序首先获取当前活动文档和数据库&#xff0c;并创建一个编辑器对象。 然后&#xff0c;使用事务开始创建正方形的操作。获取模型空间的块表记录&a…

【Java从入门到精通】Java对象和类

Java 对象和类 Java作为一种面向对象语言。支持以下基本概念&#xff1a; 多态继承封装抽象类对象实例方法重载 本节我们重点研究对象和类的概念。 对象&#xff1a;对象是类的一个实例&#xff08;对象不是找个女朋友&#xff09;&#xff0c;有状态和行为。例如&#xff0c…
最新文章