当前位置:网站首页>Solve the problems of El Popover display in V-for
Solve the problems of El Popover display in V-for
2022-07-22 14:18:00 【Yaba 902】
stay v-for in , Every one of us popover The binding value will be the same , Here I want to avoid this situation , In the access to v-for When traversing an array , I created a new array with the same length as the traversal array , The values of the array are false Used to control each independent popover
created Code in the life cycle :
//shopCart For my interface , Used to obtain v-for Array to traverse
shoppingCart().then((res) => {
this.carLists = res.data
const length = res.data.length
// Create an equal length control for each popover Array of switches (Array Create an equal length array , And use false replace )
this.visible = Array(length).fill(false)
})
template The code in :
//index by v-for Cycle time index, for example (item,index) in products Medium index
<el-popover v-model="visible[index]" placement="left" width="160">
<img slot="reference" src="../assets/images/deleteShop.png" alt="">
<p> This is a paragraph. This is a paragraph. Are you sure to delete it ?</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
// Modifying the values in the array requires this.$set Otherwise, it cannot be responsive
@click="$set(visible, index, false)"
> Cancel </el-button>
<el-button
type="primary"
size="mini"
@click="deleteShop(index)"
> determine </el-button>
</div>
</el-popover>
边栏推荐
- Make a reliable delay queue with redis
- Concurrency opening -- take you from 0 to 1 to build the cornerstone of concurrency knowledge system
- DOM -- event broker
- 1.监控概念
- 并发开篇——带你从0到1建立并发知识体系的基石
- 多线程与高并发—— Synchronized 加锁解锁流程
- 基于STM32无人超市消费系统设计
- 美团二面: Redis 5 种基础数据结构?
- 2. ZABBIX concept
- LeetCode刷题系列 -- 剑指 Offer 47. 礼物的最大价值
猜你喜欢
Multithreading and high concurrency -- synchronized locking and unlocking process
The way to practice and play strange: the method of detecting data types in JS
OA project introduction & Conference release
ByteDance test post, the front has passed, and the last HR sinkhole Tell me that
The way of practicing and fighting strange things: detailed explanation of sym in ES6
Which Hong Kong cloud server or physical server is more prone to downtime?
The development of raspberry pie - the Internet cable connects raspberry pie and laptop directly - records the bitter process
美团二面: Redis 5 种基础数据结构?
Ardunio開發——水泵操作過程
51 MCU peripherals: LED dot matrix
随机推荐
AttributeError: ‘str‘ object has no attribute ‘param_group‘
Seven schemes of Web real-time message push
Talk about how programmers improve their writing ability
8.zabbix分布式
The 22 pictures show you in-depth analysis of prefix, infix, suffix expressions and expression evaluation
The difference and connection between cookies and seesion
DOM -- event broker
kube-scheduler的调度上下文
从20s优化到500ms,我用了这三招
ABAP语法基础3
ASM Learning Series (II)
腾讯测试岗,被面试官虐哭...直到学长给了我这些知识点
From 20s to 500ms, I used these three methods
C language: leak detection and filling (II)
CTF (dolls)
基于STM32无人超市消费系统设计
LeetCode刷题系列 -- 剑指 Offer 47. 礼物的最大价值
Async function and await expression in ES6
找100以内的素数,求约数,求两个数的最大公约数
[ERR] 1273 - Unknown collation: ‘utf8mb4_ 0900_ ai_ ci‘