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

相关推荐
岁岁岁平安15 小时前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人1 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin2 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
YH丶浩5 天前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
个人看法5 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
西洼工作室7 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊7 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
fcm199 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸9 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别