【vue】v-for列表渲染绑定key值出现的问题记录

最新推荐文章于 2023-06-06 19:23:57 发布
最新推荐文章于 2023-06-06 19:23:57 发布
阅读量504 收藏
点赞数
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838046/article/details/108819038
版权

在这里插入图片描述

以上为todolist项目中出现的问题

不能在一个页面中出现key值相同的相同组件

现象：当点击任务条的单选框切换分组时，原分组顶上来的任务条的单选框的选中状态，会跟之前的任务条上的单选框点击后的状态相同

原因：任务条组件复用，两分组均是使用v-for列表渲染多个任务条的，且，绑定key值为数组的下标

也就是说，同一个页面，会出现两个key值相同（两个都是分组第一个，则key都是0）的相同组件。

Vue内部会复用某些属性（详细原因未知）

前端二狗子
关注
专栏目录
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）
百赢出品，必属精品
04-23 1807
列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
Vue中v-for指令中的key遇到的问题
热门推荐
weixin_38098192的博客
05-17 1万+
v-for 给了两个参数key和index，但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象，但是在数组下是没有key值的，而在对象下可以得到key，可以显示出来<div id="app">          <ul>              <li v-for="(item,index,key) of list">{{item.n}}       ...
vue中 使用数组下标作为v-for的key值 所带来的的问题
qq_41620202的博客
07-26 3437
在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；也就是说列表数据修改的时候，他会根据key值去判断某个值是否改变了，如果改变了就重新渲染，不然就复用之前的元素。 v-for可以使用数据本身所具有的唯一值作为key，也可以使用索引index作为key 使用index作为key时： <template> <div> <ul> <li v-for="(item,index) in list" :key="index">{{item.na
v-for中key值所产生的问题（详解）
m0_73490373的博客
06-06 796
vue中的key有什么作用?(key的内部原理)key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下:2.对比规则:(1).旧虛拟DOM中找到了与新虚拟DOM相同的key:@.若虛拟DOM中内容没变，直接使用之前的真实DOM!@.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
vue中v-for 中 :key的一系列问题 (3)
会点php的前端小渣渣
11-05 466
为什么不能用 默认的index 作为 key？ 如果你用 index 作为 key，那么在做特殊操作新增或者删除某项的时候，内部默认的index 永远都是连续的，可能会出现bug, 所以有时候不写key、或者写了默认的key效果是一样的。 再通俗点： 这也是vue不推荐使用数组下标作为key的原因。例如数组删除了一个元素，那么这个元素后方元素的下标全都前移了一位，之前key对应的数据和dom就会乱了，除非重新匹配key，那就容易产生错误。如果重新匹配key，等于全部重新渲染一遍，违背了使用...
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
Vue---v-for渲染和样式绑定
weixin_53027472的博客
09-25 829
Vue---v-for渲染和样式绑定
基于vue v-for 多层循环嵌套获取行数的方法
10-17
v-for指令是Vue模板语法中用于渲染列表数据的一个重要工具。它可以通过一个数组或对象来遍历出多个节点。基本的用法是将v-for绑定到一个数组上，并通过特殊语法`item in items`来遍历数组，其中`item`代表当前遍历到...
vue中使用v-for时为什么不能用index作为key
11-21
在Vue和React等现代前端框架中，`v-for`（Vue）或`map`（React）等指令用于遍历数组并动态渲染列表。在使用这些指令时，为列表项提供`key`属性是非常重要的，因为它对虚拟DOM的Diff算法有着直接影响。然而，使用索引...
Vue学习记录-v-show,v-for遍历数组，对象，绑定key
orangecloudy的博客
04-24 792
<div id="app"> <!-- v-if:当条件为false时，该元素不会存在于dom --> <h2 v-if="isShow">{{message}}</h2> <!-- v-show: 当条件为false时，v-show添加了一个行内样式display:none --> <h2 v...
列表渲染中的key的作用
weixin_44889992的博客
04-20 987
列表渲染中的key的作用 给VDOM添加标记 如果没有key会产生的问题： VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了 解决： 使用key属性 使用： <li v-for = " (item,index) in list " :key ...
vue template v-for不能带key问题，鼠标悬停+快速修复 跳过验证 报错(报红)
tanzongbiao的专栏
11-08 2710
文件 --> 首选项 --> 设置 --> 搜索框输入：vetur.validation.template --> 取消勾选。template v-for不能带key问题：(不行)偶然发现还有另外一种比较快捷的方式：(ok)会在报错代码上面加一条跳过验证的注释。
vue中v-for写在template上，不能加key问题
Supaopao的博客
06-29 756
vue
Vue中使用v-for时key的相关问题
Shaoyouiqng的博客
06-10 485
无论是在react或者vue开发中，我们会遇到key的相关报错的烦恼，比如：不用key，或者选择的key不合理。那么今天小编给你分析分析里面的小秘密 1、v-for为啥要用key？ Vue和React的渲染原理都实现了一套虚拟DOM,使我们可以不直接操作DOM元素，只是操作数据就可以重新渲染页面，背后的‘男人’就是高效的Diff算法 Vue和React的Diff算法大致相同，都是用这三大策略Tree Diff、Component Diff、Element Diff,通过这三层依次的遍历比较，使得虚拟D.
vue中v-for循环key值问题研究
Bekind2010的专栏
04-25 7725
介绍 关于key的作用，官方是这样描述的： ​ key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 之前不知道在哪里看的文章，一直以为使用key是为了就地复用，但是从上面的描述中可以看到
vue中model已经绑定，但页面没有显示内容
简单Cere
11-19 5001
举一个常见例子比如联动的下拉框（先选择城市，然后获取当前城市区域的数据，可是会遇到的问题是当点击区域的时候，页面不显示，但model绑定的值已经得到） 城市(下拉框)---区域(下拉框) <div> <el-select v-model="form.city" clearable placeholder="请选择城市" @change="getArea()" @...
解决VS code编写VUE中v-for没有使用key报错问题
ljy123w的博客
12-01 2024
方案一：点击左下角的设置在搜索设置当中输入"vetur.validation.template" 将勾选去掉即可 方案二：官方建议我们使用v-for时绑定key值 （最好不要绑定index） <swiper-item v-for="(item, index) in banners" :key="item"/> ...
vue中v-for写在template上，加key提示错误
peppa_pig的博客
07-22 5060
vue中v-for写在template上，加key提示错误
关于vue中key报错的解决
Study123wf的博客
04-28 502
问题:在vue中v-for时需要添加key 这个key 需要"唯一",针对的是在不在同一层DOM节点上key唯一。解决办法 根据定义 让循环不在同一dom节点上，添加标签。原因:这里同时有两个for循环 在同一dom节点上。看似没错 已经添加了key 但是控制。
vue v-model绑定v-for
最新发布
04-21
在Vue中，v-model指令用于实现双向数据绑定，而v-for指令用于循环渲染列表。当它们结合使用时，可以实现对循环列表中每个元素的双向数据绑定。 具体实现方式如下： 1. 首先，使用v-for指令循环遍历一个数组或对象，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值