vue3-drag-resize 拖拽 拉伸 循环 并删除

复制代码
            <VueDragResize :isResizable="false" :w="478" :h="278" :x="-478" v-show="legendList.length"
                v-for="(item,index) in legendList" :key="item.name">
                <div class="legend-list">
                    <img src="@/assets/img/mapIcon(29).png" alt="" class="layer-close cur" @click="closeLegendList(index)">
                    <div class="v-flex1 v-scriollbar legend-list-contain">
                        <div class="v-flex2 v-m-r20" v-for="i in item.legends">
                            <div class="v-title-msg">{{ i.name }}</div>
                            <div class="legend-list-icon">
                                <div v-for="items in i.legendList" class="v-flex1 v-jc-fs v-ai-c">
                                    <img :src="items.img ? items.img : commonIcon" alt="">
                                    <div class="legend-list-title">{{ items.legendName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </VueDragResize>

注意循环的时候不要用index作为唯一的key,这样会导致删除的时候index改变而导致页面重新渲染,使用不会变的key值,删除的时候则不会重新渲染循环页面。

相关推荐
有什么东东7 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络78 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡2 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙2 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端2 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化
凕雨3 天前
Cesium学习笔记——坐标系统及坐标转换
前端·javascript·笔记·学习·arcgis·vue
前端极客探险家3 天前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
末日的狂欢姐3 天前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
我爱布朗熊3 天前
1.Vue3 - 创建Vue3工程
vue