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值,删除的时候则不会重新渲染循环页面。

相关推荐
wuaro43 分钟前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会1 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
YiHanXii2 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生3 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎3 天前
Vue3当中el-tree树形控件使用
vue
Num_9_G6 天前
使用vue cli 5.0 在vscode中运行vue命令报错
vue
小二·6 天前
Node.js 下载安装及环境配置教程、卸载删除环境配置超详细步骤(附图文讲解!) 从零基础入门到精通,看完这一篇就够了
前端框架·node.js·vue
HBR666_8 天前
菜单(路由)权限&按钮权限&路由进度条
前端·vue
等什么君!8 天前
ElementPlus 快速入门
vue