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 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml417 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf21 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班