vant4的组件气泡弹出框van-popover,在列表中遍历后点击一个全部/显示隐藏,解决办法

news2024/12/26 2:54:19

环境:vue3 + vant-ui4

<div v-for="(info, index) in item.infoListVOs" :key="index">
   <van-popover
  	 v-model:show="showPopover"
     :actions="actions"
     overlay
     placement="bottom-end"
     @select="onSelect(info, index)"
   >
     <template #reference>
       <div class="selectHg">
         {{ actions[0].text }}
         <van-icon name="arrow-down" class="text-#2e99a4 ml-1"></van-icon>
       </div>
     </template>
   </van-popover>
</div>

结果:

在这里插入图片描述

点击一个气泡弹出框后,所有的气泡弹出框全部弹出了,因为绑定的是同一个变量showPopover

解决办法:删除v-model,不需要绑定

<div v-for="(info, index) in item.infoListVOs" :key="index">
   <van-popover
     :actions="actions"
     overlay
     placement="bottom-end"
     @select="onSelect(info, index)"
   >
     <template #reference>
       <div class="selectHg">
         {{ actions[0].text }}
         <van-icon name="arrow-down" class="text-#2e99a4 ml-1"></van-icon>
       </div>
     </template>
   </van-popover>
</div>

结果

在这里插入图片描述

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

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

相关文章

vector的自实现(迭代器失效问题)与继承续讲

引子&#xff1a;在生活中&#xff0c;我们使用vector很频繁&#xff0c;我们是不是可以自己来实现一个呢&#xff1f;&#xff0c;其实也不难&#xff0c;我们在学过数据结构&#xff0c;就很easy啦&#xff01; As we all kowmn,vector基础有以下函数&#xff01; from my …

GMSB文章五:微生物组差异分析ANCOMBC-2

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 介绍 微生物的物种差异分析是一项关键的生物信息学任务&#xff0c;旨在识别不同生物群落或样本组…

k-NN 剪辑近邻法

本篇文章是博主在人工智能等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在AI学习笔记&#…

基于halcon的眼在手外(Eye-to-Hand)标定

前言 上个月写了一个《基于halcon的眼在手上&#xff08;Eye-in-Hand&#xff09;标定》的文章&#xff0c;通过官方的示例代码进行了简单的叙述&#xff0c;想学习的小伙伴可以点击链接进行学习。之前博主认为眼在手上&#xff08;Eye-in-Hand&#xff09;的案例更多&#xff…

【Java笔记】Flyway数据库管理工具的基本原理

文章目录 1. 工作流程2. 版本号校验算法3. 锁机制3.1 为什么数据库管理工具需要锁3.2 flyway的锁机制 Reference 最近实习做的几个项目都用到了Flyway来做数据库的版本管理&#xff0c;顺便了解了下基本原理&#xff0c;做个记录。 详细的使用就不写了&#xff0c;网上教程很多…

【财经研究】并购重组的“不可能三角”

伴随着沪深IPO景气度下滑后&#xff0c;并购重组正受到市场的关注。 近期监管层正频频为并购重组发声 6月20日&#xff0c;证监会主席吴清在陆家嘴论坛上指出&#xff1a;“支持上市公司运用各种资本市场工具增强核心竞争力&#xff0c;特别是要发挥好资本市场并购重组主渠道作…

干涉阵型成图参数记录【robust】

robust 这个玩意经常忘记&#xff0c;就是取2的时候是更加显示大尺度的结构&#xff0c;取-2更加显示小尺度结果&#xff0c;一般取0就是正常就好了

高效同步的PWM升压DC/DC转换器 SD6201/SD6201-AF

SD6201是高效同步的PWM升压DC/DC转换器优化为介质提供高效的解决方案电力系统。这些设备在输入电压介于0.9V和4.4V之间&#xff0c;带有1.4MHz固定频率切换。这些功能通过允许使用小型、薄型电感器以及陶瓷电容器。自动PWM/PFM轻负载下的模式切换可节省电力提高了效率。电压在2…

IMU坐标系与自定义坐标系转化

1.首先示例图为例&#xff1a; 虚线黑色角度为IMU的坐标系&#xff1b;实线为自定义坐标系&#xff1b; 矫正&#xff1a;&#xff08;默认angleyaw为IMU采的数据角度&#xff09; angleyaw_pt angleyaw-25;if(-180<angleyaw&&angleyaw<-155) // 角度跳变问…

GuiLite C语言实现版本

简介 本项目是idea4good/GuiLite的C语言实现版本&#xff0c;基于2024-06-20节点的版本&#xff08;提交ID&#xff1a;e9c4b57&#xff09;。 本项目仓库&#xff1a;GuiLite_C 需求说明 作为芯片从业人员&#xff0c;国产芯片普遍资源有限&#xff08;ROM和RAM比较少-都是…

Str.format()方法

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 在Python2.6之后&#xff0c;提供了字符串的format()方法对字符串进行格式化操作。format()功能非常强大&#xff0c;格式也比较复杂&…

深度学习论文撰写实验对比分析时复现其它论文方法的问题

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…

BERT论文略读

《BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding》 &#xff08;https://arxiv.org/abs/1810.04805&#xff09; 摘要&#xff1a;前人优秀工作仅用了单向信息且不能很好的应用到各类下游任务&#xff0c;本文提出一种基于Transformer的双…

如何理解AKM?

关于Wi-Fi的加密认证过程&#xff0c;我们前面已经讲解&#xff1a;WLAN数据加密机制_tls加密wifi-CSDN博客 今天我们来理解下AKM&#xff0c;AKM&#xff08;Authentication and Key Management&#xff09;在Wi-Fi安全中是指认证和密钥管理协议。它是用于确定Wi-Fi网络中的认…

【Linux】Linux下使用套接字进行网络编程

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ 用于网络应用开…

揭秘数据合并的秘密:一文掌握一对一、多对一、多对多合并技巧与实战!

使用pd.merge()合并 类似 MySQL 中表和表直接的合并merge与concat的区别在于,merge需要依据某一共同的行或列来进行合并使用pd.merge()合并时,会自动根据两者相同column名称的那一列,作为key来进行合并每一列元素的顺序不要求一致1. 一对一合并 df1 = pd.DataFrame({"…

搜维尔科技:SenseGlove Nova2国内首款支持手掌心力回馈手套开售

《SenseGlove Nova 2》现正全球发行中! 搜维尔科技独家代理最新上市的 SenseGlove Nova 2 是世上首款&#xff0c;也是目前市面上唯一一款提供手掌力回馈的无缐VR力回馈手套&#xff0c;它结合了三种最先进的反馈技术&#xff0c;包括主动反馈、强力反馈及震动反馈&#xff0c…

k8s学习笔记(一)

configMap 一般用来存储配置信息 创建configMap 从文件中获取信息创建&#xff1a;kubectl create configmap my-config --from-file/tmp/k8s/user.txt 直接指定信息&#xff1a; kubectl create configmap my-config01 --from-literalkey1config1 --from-literalkey2confi…

小九首度回应与小水分手传闻揭秘

#小九首度回应&#xff01;与小水分手传闻揭秘#近日&#xff0c;泰国娱乐圈掀起了一股热议的狂潮&#xff01;传闻中的“金童玉女”组合——“小水”平采娜与“小九”NINE疑似分手的消息&#xff0c;如同巨石投入平静的湖面&#xff0c;激起了千层浪花。而在这股狂潮中&#xf…

CesiumJS【Basic】- #020 加载glb/gltf文件(Primitive方式)

文章目录 加载glb/gltf文件(Primitive方式)1 目标2 代码实现3 资源文件加载glb/gltf文件(Primitive方式) 1 目标 使用Primitive方式加载glb/gltf文件 2 代码实现 import * as Cesium from "cesium";const viewer = new Cesium.Viewer