Vue中使用v-for生成dom删除元素错乱的问题

最新推荐文章于 2023-07-10 21:46:09 发布
最新推荐文章于 2023-07-10 21:46:09 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： vue2.0 文章标签： vue v-for key
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/86528244
版权

      项目上需要一个条件树的组件，多个条件这里使用一个数组去保存，然后使用v-for循环数组插入dom。

      vue组件里使用v-for时很容易忽略了每一项的key值，遇到的问题如果后续需要对数组进行删除操作的情况下，需要加上key值而且要绑定该数组项的唯一标识来标识每一个生成的dom元素，这样就不会导致改动数组数据后dom不重新渲染显示错乱的问题。

<cond-node v-for="(item,index) in nodeData.condItems" :key="item.id" :node-data="item" @deleteNode="deleteCondNode(index)" ></cond-node>
若晨工作室
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中删除v-for
whatisthespring的博客
07-25 2142
二话不说直接上代码： &lt;div&gt; &lt;el-card class="box-card" shadow='nevner'&gt; &lt;div slot="header" class="clearfix"&gt; &lt;div class="card-right-wrap&q
【踩坑记】Vue 中使用 v-for 渲染组件，删除第 N 个组件时渲染出错问题
Wonder233的学习博客
01-04 1096
发现问题 最近在做文件多标签页编辑的功能，使用了 v-for 来加载多个已打开文件的编辑器，并且在标签上有关闭按钮可以关闭指定的已打开的文件编辑器。 父组件页面渲染如下： <template v-for="(file, index) in visitedFiles"> <editor-component v-show="currFile.name === file.name" :key="`editor${index}`" :file="file" @close="closeFile(f
萌新VueDay2——v-for（增删改查）
weixin_45019566的博客
12-30 325
萌新Vue入门Day2——v-for 列表渲染 v-for遍历数组 vue中列表循环需加:key=“唯一标识” 唯一标识可以是标签里面的id或者index等。 <div id="test"> <ul> //p :对象 index: 数组下标 students: 数组 :key :唯一标记 <li v-for="(p,index) in ...
VUE结合jquery插件，dom冲突问题
yangqii的博客
09-19 968
一、this.$nextTick可以在dom渲染完成之后执行操作 设置定时器,setTimeout(function(){},s) 原文地址：https://blog.csdn.net/qq_38401919/article/details/80731274 二、用vue的自定义指令和组件来包装，解决冲突的问题 自定义指令---Vue1.x版本 https://v1...
前端框架 VUE-列表渲染-v-for增删改查之对象数组两种形式及列表的搜索和排序（四）
野的博客
08-01 357
列表显示指令 数组: v-for / index 对象: v-for / key 列表的更新显示 删除 item 替换 item 列表的高级处理 列表过滤 列表排序 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
解决vue组件中使用v-for出现告警问题及v for指令介绍
08-28
解决 Vue 组件中使用 v-for 告警问题及 v-for 指令介绍 在 Vue 组件中使用 v-for 指令时，经常会出现告警问题，这篇文章将为大家介绍解决该问题的方法，并详细介绍 v-for 指令的使用。 解决 Vue 组件中使用 v-for ...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
解决vue的 v-for 循环中图片加载路径问题
10-18
本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，我们需要理解问题的背景。在一个实际项目中，产品需求要求图片与名称一一对应，但由于没有专门的图片服务器，图片被存储在前端。在这种情况下...
使用vue的v-for生成table并给table加上序号的实例代码
08-29
使用 Vue 的 v-for 生成 Table 并给 Table 加上序号的...使用 Vue 的 v-for 生成 Table 并给 Table 加上序号需要考虑到 DOM 更新的问题，我们可以使用 Vue 的 nextTick 函数或生命周期钩子函数来实现添加序号的操作。
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...
踩坑！关于v-for和splice连用导致index错乱无法删除当前项的解决方案
yanhua1575的博客
09-06 1709
当我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标。 平时绑定key值的时候，都习惯采用如下写法，直接绑定下标: key="index" v-for="(item,index) in list" 但是因为key值绑定的是index，删除元素会导致顺序错乱问题，并不会像期望的那样，点击哪一项就会删除哪一项 这里通俗的解释下： 下标在这是个临时身份，它的默认位置不会变化，如果你里面的item项移动了，那么移动的数据对应到index上，所以你的
Vue中使用v-for时key值绑定删除元素总是最后一个
weixin_47641768的博客
02-24 3589
Vue中使用v-for时key值绑定删除元素总是最后一个 在vue中使用v-for的时候需要给每个item绑定一个唯一的值，这个值可以是number或者string类型的值。key的作用主要是用在Vue的虚拟dom算法，在新旧nodes元素对比时辨识。Vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。重复的key会造成渲染错误。这边演示一个删除一个元素后渲染出错的情况。 看下面一段代码： <!-- 父组件 --> <template> <div id=
Vue的v-for注意点
lihui61357457的博客
12-04 274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>34-Vue-v-for-key</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.v-for注意点 1.1v-for为了提升性能, 在更新已渲
解决vue遍历移除数组元素 时，数据出错，下标不匹配，$nextTick
m0_37394102的博客
08-05 2638
vue双向数据绑定，删除数组元素的时候 已经不是原数组了，数组下标变化但循环还是在继续 this.$this.$nextTick(() => {(() => {}） Vue的官方文档中详细解释： Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种...
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
最新发布
派拉斯兔子的博客
07-10 5235
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
vue3 forEach 或者 map中使用splice删除数组元素错误问题
qq_19249021的博客
02-27 3386
vue3 forEach 或者 map中使用splice删除数组元素错误问题
v-if&&v-for&&v-show
偷只猫来养的博客
08-19 1469
v-if&&v-for&&v-show （1）v-if：通过删除和添加节点来显示页隐藏节点，是直接操作DOM的指令，当频繁切换节点时，会频繁的造成重排和重绘，导致效率降低，不建议使用它；而在操作节点不频繁的情况，比如说系统权限问题时，比较适合使用v-if，使用的语法如下： <div @click="change"> <button type="button">第一个</button> <button type="button"&g
vue中在DOM中使用v-for数据渲染混乱问题及解决方法
m0_56390097的博客
02-07 1322
有些时候，当使用v-for渲染数据时，使用了作为条件编译，在浏览器上渲染呈现的内容顺序将会和所渲染的数组顺序不一样。解决方法，避免在v-for中使用div作为v-if判断标签。
VUE中v-for造成数据混乱问题及解决方法
qq_44880532的博客
04-06 3791
## 关于v-for遍历造成dom数据混乱问题 有关问题图解 首先我们创建一个可以双向交互的列表 <div id="app"> <form > <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add()"> </form>
关于VUE中v-for循环的dom使用ref获取不到问题
06-01
如果你在使用 Vue 中的 v-for 循环渲染 DOM 时，发现通过 ref 获取元素时无法成功获取到，可能是因为 ref 是在循环中被赋值给了数组，而不是单个元素。 解决这个问题的方法是，可以给每个循环的元素都添加一个唯一的标识符，例如使用 :key 属性，然后在 ref 中使用这个标识符，这样就能够正确地获取到每个元素了。参考代码如下： ``` <template> <div v-for="(item, index) in list" :key="index"> <div ref="itemRef[index]">{{ item }}</div> </div> </template> <script> export default { data() { return { list: ['a', 'b', 'c'], itemRef: {} // 定义一个对象，用来存储元素的引用 } }, mounted() { // 在 mounted 钩子函数中获取每个元素的引用 for (let i = 0; i < this.list.length; i++) { this.$set(this.itemRef, i, this.$refs[`itemRef[${i}]`][0]) } console.log(this.itemRef) // 打印出引用对象 } } </script> ``` 在上面的代码中，我们定义了一个对象 itemRef，用来存储每个元素的引用。在 mounted 钩子函数中，我们使用 $refs 获取到每个元素的引用，然后通过 $set 方法将其添加到 itemRef 对象中。最后，我们可以在控制台中打印出 itemRef 对象，来查看每个元素的引用是否正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值