Bug Type: Component
Environment
- Vue Version:
3.2.47 - Element Plus Version:
2.2.34 - Browser / OS:
Chrome 110.0.5481.178 - Build Tool:
Vite
Reproduction
Related Component
el-popover
Reproduction Link
Element Plus Playground
Steps to reproduce
<script setup>
const visible = ref(false)
</script>
<template>
<template>
<div>
<el-popover
v-model:visible="visible"
placement="top-start"
:width="200"
trigger="click"
content="content1"
>
<template #reference>
<el-button @click="visible = true">button1</el-button>
</template>
</el-popover>
<p>
The popover will be hidden immediately when click button1（use v-model:visible ）
</p>
</div>
</template>
</template>What is Expected?
popver stay open when click
What is actually happening?
popver is hidden immediately after opening
Additional comments
:visible works, but v-model:visible doesn't
(empty)
7条答案
按热度按时间y1aodyip1#
@co2color when using
v-model:visible, the control is all on your side, the trigger won't be able to update the state, update them yourself.mpgws1up2#
@co2color when using
v-model:visible, the control is all on your side, the trigger won't be able to update the state, update them yourself.Sorry, can you give me a playground demo?I think I'm updating the state myself....( use
@click="visible = true") ,but popever is be hideen because visible will be false immediatelyv1l68za43#
q35jwt9p4#
But I mean that use
v-model:visible="visible"confuse mef45qwnt85#
controlled
You need to understand what is bidirectional and what is unidirectional. You use v-model, and you modify visible in the internal button, which causes you to modify it to true, and the control internally to false.
kcugc4gi6#
Humm, I think this confuses me as well 😢 , and I think @co2color was right, when using
:visible="visible"the visibility should never be updated by the down stream component, and when usingv-model:visible="visible"it should be able to be controlled by both ends, and I think this is a bug so I reopened this issue and I will assign it to myself.ttygqcqt7#
It is two-way, so his button is triggered to change to true first, and at this time popper's clickoutside is also triggered, and it changes back to false.