element-ui 使用对象控制多 popover 的显示与关闭

最新推荐文章于 2024-07-19 11:42:07 发布

Zonson9999

最新推荐文章于 2024-07-19 11:42:07 发布

阅读量1.1k

点赞数

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/wuzhong8809/article/details/119750893

版权

element-ui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue.js实现房间列表中，每个<p>元素点击后弹出对应的独立popover，通过v-model绑定多键值对对象控制popover显示。尝试了用数组控制但未成功，最终分享了正确的方法和解决思路。

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

    <template v-for="(room, idx) in rooms ">
        <p >
            {{  idx + "->" + room.name}}
        </p>
    </template>

假设是这样的一个用循环输出的<p> ，每个<p> 点击时显示一个单独的 popover。

代码实现：


    new Vue({
        el: '#app',
        data () {
            return {
                rooms: [ {name:"111"}, {name:"222"}, {name:"333"}, {name:"444"}, {name:"555"}],
                popover:{},
            }
        }
    })

    <template v-for="(room, idx) in rooms ">
        <p  @click="popover[idx] = !popover[idx]" >
            {{  idx + "->" + room.name}}
        </p>

        <el-popover
                placement="right"
                width="400"
                trigger="click" v-model="popover[idx]">
            <p>Norway {{  idx + "->" + room.name}} </p>
        </el-popover>
    </template>

这里的 popover 的数据类型是一个多键值对的对象：

popover: {

0:false,

1: true,

2: false,

}

GIF效果：

坑：

最开始想到的是 popover 有 rooms.length 个，那么就考虑用一个数组来控制,类似这样：

结果发现这样没有成功，具体原因不明确

popoverArray:[false, false, true, true]



    new Vue({
        el: '#app',
        data () {
            return {
                rooms: [ {name:"111"}, {name:"222"}, {name:"333"}, {name:"444"}, {name:"555"}],
                popoverArray:[],
            }
        }
    })

    <template v-for="(room, idx) in rooms ">
        <p  @click="popoverArray[idx] = !popoverArray[idx]" >
            {{  idx + "->" + room.name}}
        </p>

        <el-popover
                placement="right"
                width="400"
                trigger="click" v-model="popoverArray[idx]">
            <p>Norway {{  idx + "->" + room.name}} </p>
        </el-popover>
    </template>