van-collapse组件动态循环子展开项数组，改变数组，新的项点击展开无效问题

最新推荐文章于 2024-04-24 10:42:37 发布
原创 最新推荐文章于 2024-04-24 10:42:37 发布 · 971 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uniapp

文章讨论了在van-collapse组件中遇到的问题，即已渲染的van-collapse-item无法响应数组动态添加的新数据。解决方法是使用v-if条件渲染，先隐藏组件，添加数据后再显示，但需确保添加后等待半秒再显示以保证效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.原因

是由于van-collapse组件，van-collapse-item已经渲染，再在数组里面加入数据，加入的数据项展开无效。

2.解决办法

通过v-if控制，在数组加入数据之前先隐藏van-collapse，加入之后再显示（需注意，在隐藏后需要设置一个定时器，隔半秒后再显示）

vant组件之van-popover气泡框结合list数组列表循环使用
yangmy_Shy的博客
03-08 1万+
<van-col span="6" class="dzmyBulk_xmCol" @click="stopUrlHref"> <p class="font14 color7BA">每吨利润(万)</p> <van-popover v-model="showPopoverFlag[index..
vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常
最新发布
Dark_programmer的博客
07-01 1041
vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常
vant折叠面板collapse控件不生效
liyanxu92的博客
06-16 3103
v-model关键字写错导致vant折叠面板collapse控件不生效
vant之van-collapse无法默认展开某一项
优快云_zhhjgy的博客
12-21 1775
name 唯一标识符，默认为索引值 number | string index v-model 当前展开面板的 name 手风琴模式：number | string 非手风琴模式：(number | string)[] 但我在使用时 activeNames: [‘0’] 死活不管用，后来改[0]好了 <div class="small-area-details" v-for="(listItem, listIndex) in goldAlbumList" :key="listIndex"&gt..
elementUI里面collapse下面的点击事件无效
梨子社区
01-17 1889
添加一个 @mouseup 阻止冒泡就行了 <!-- 指令 --> <div class="instructions" v-show="instructionShow"> <el-collapse> <div v-for="(item, index) in instructionArr" :key="index"> <el-collapse-item :title="item.name"
给循环的折叠面板van-collapse-item的展开和收起添加文字
qq_53847322的博客
11-10 1945
移动端开发中使用vant的折叠面板问题，如何给循环的折叠面板判断当前的展开或是收起状态来控制图标旁边的内容显示，给循环的折叠面板添加文字状态
Vant 的collapse折叠面板的使用，解决循环，迭代，点击全部展开，点击单个展开
u013017173的博客
09-02 2万+
Vant 的collapse折叠面板的使用，解决循环，迭代，点击全部展开，点击单个展开 1.点击某个折叠，其他折叠也展开，v-for写在van-collapse 里 name不起作用。 <van-collapse v-model="activeName" v-for="item in textList" :key="item.index" > <van-collapse-item name=""> 2.点击某个折叠，只展示单个折叠其他不受影响，v-for写在van-colla
vant 自定义 van-dropdown-item的用法
10-15
本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
11-19
在Vue项目中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题（title）始终不会根据所选的选项进行更新。本篇将详细介绍如何解决这个问题。 首先，确保正确安装并引入Vant组件...
el-collapse折叠面板标题加按钮，点击不让面板展开
weixin_48549175的博客
04-11 9750
在使用折叠面板的时候，有些需求要在标题上加交互 但是如果只是简单加按钮的话就会再点击时把面板也点开 要解决这个问题就要使用阻止冒泡 @click.stop.prevent。 <el-collapse accordion> <template v-for="(item,index) in facilityData"> <el-collapse-item :name=index :key="item.ID">
详解mpvue中使用vant时需要注意的onChange事件的坑
11-27
最近用了一下Vant Weapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index" } 2.通过value控制展开的面板列表，ac
van-collapse折叠面板组件使用
m0_46577631的博客
05-25 3633
折叠面板的使用 话不多说，我们直接看代码吧，里面的数据就是自己随便写的，可以根据自己实际情况来！ <template> <div> <van-collapse v-if="affairArray.length>4" v-model="activeNames"> <van-collapse-item name="1"> <t
uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版）
我总是词不达意的博客
10-18 3289
uniapp collapse动态生成多个折叠面板手动展开收起（包括uni-ui版） uni-app动态生成多个折叠面板，点击展开收起 uniapp collapse 手动收起
vue中实现点击展开和收起功能（具有动画效果）
Fxhani的博客
01-10 1万+
vue中实现点击展开和收起功能（具有动画效果） html <div class="marketplace_aside_b"> <div v-for="item in classd" :key="item.id" class="marketplace_aside_show_that" >{{ item...
vant里的vant 的 Collapse 折叠面板
weixin_44446394的博客
04-18 3708
之前做项目的时候，使用了 Collapse 折叠面板，但是始终是一起开，一起关，感觉不是很好，于是去查文档说明，感觉说明文档说的不是很清楚，查了很多资料才发现，其实要让折叠面板点那个开哪个，只需要把van-collapse-item 里面name绑定为唯一的值，我是动态绑定为:name=“answerindex”，就可以做到点哪个开哪个了。 上代码 中间代码的代码就省略了，最后的结尾标签也可以自己补充，重要的一点就是v-model绑定的值，控制的实际是van-collapse-item里面的name值，
vant的Collapse 折叠面板和单元格中使用v-for
dawnStart的博客
03-26 1万+
import Vue from 'vue'; import { Cell, CellGroup} from 'vant'; <van-cell :key="index" :title="item.title" :value="item.grade" v-for="(it...
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
热门推荐
商务合作 | 共同学习 | 携手共进
03-24 9万+
Vant UI 中 van-collapse 下拉折叠面板组件的使用。
Vue遇到的问题记录
一茗道人 ~~ ~ 阿亮-的博客
05-27 8726
使用v-for的时候，出现了重复的key，导致控制台报错，但控件能正常渲染。1.2 解决办法检查key是否存在重复，引号内则为重复的key，修改key为唯一值即可。
原生小程序自定义vantUI中van-collapse手风琴组件的标题
文龙刚的博客
04-24 759
【代码】原生小程序自定义vantUI中van-collapse手风琴组件的标题。
vant2中的van-picker组件:columns是个空数组，如何进行提示
05-30
在 Vant2 中，当 `columns` 属性为空数组时，VanPicker 组件将会显示一个空白的选择器。如果您需要给用户一些提示，可以在 VanPicker 组件内部添加一个 slot 插槽，用来显示提示信息。示例如下： ```html <van-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值