关于 element 中循环 popover 手动控制展示问题

在开发过程中 经常会遇到这种情况 
循环了 N 条数据，每条数据都有单独的 popover 弹出层 

1.    
2.       <el-popover placement="bottom" :title="`标题${item}`" width="200" trigger="manual" content="这是一段内容。" v-model="visible">
3.         <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
4.       </el-popover>
5.    

复制代码

如果这样的话，会出现点击一个按钮，全部的 popover 都会出现，再点击，全部都会消失。
这样的话就不符合需求了，所以说以上代码需要修改。
产生这样问题的原因是因为一个布尔值已经无法控制多个弹出层的展示了。
思路：可以修改为多个布尔值控制（数组），或者修改成一个对象控制，或者用 id 判断
以下是我得实现方式

1. 1     
2. 2       <el-popover placement="bottom" :title="`${item}`" width="200" trigger="manual" content="这是一段内容。" :value="funPopover(item)">
3. 3         <el-button slot="reference" @click="funaaaa(item)">手动激活{{item}}</el-button>
4. 4       </el-popover>
5. 5     

复制代码

1. 1  data() {
2. 2     return {
3. 3       id: null
4. 4     };
5. 5   },
6. 7   methods: {
7. 8     funaaaa(item) {
8. 9       if (this.id == item) {
9. 10         this.id = null;
10. 11       } else {
11. 12         this.id = item;
12. 13       }
13. 14     },
14. 15     funPopover(item) {
15. 16       return item == this.id;
16. 17     }
17. 18   }

复制代码

一个布尔值无法判断的话，跟列表一样，用一个 id 判断，
点击时候给 id 赋值，再次点击给 id 置空，因为控制显示隐藏的是 v-model 并且后边无法跟函数，所以修改为 value 控制，后边跟一个函数，用来判断，得到布尔值。
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！