环境: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>