vue中用v-for遍历填充列表时，可能会由于index作为key产生顺序显示错误是为什么呢？

最新推荐文章于 2023-04-03 13:45:53 发布

原创最新推荐文章于 2023-04-03 13:45:53 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

部署运行你感兴趣的模型镜像

这里主要是涉及到了虚拟dom的对比算法，用索引作为key进行对比时，相同的复用缓存中的值，不同的用新的值。因此在对比的过程中，图中的0,1,2,索引下的input全部复用，就产生了数据的不一致。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ytfdcxy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

v-for循环key用index的bug

优快云_hwb的博客

07-23

1870

近期公司项目中出现了一个线上bug，场景为：我们使用列表list作为循环遍历一个子组件，key值用的list的index下标，list中的每一项item作为props属性传入子组件中，如图。在子组件中，我们以item内的值为判断标准定义了一个组件的data属性，如图。组件如图: 然后我们在父组件中对list数组进行筛选操作，筛选过后，list长度变短，内容顺序自然变化，我们遍历的子组件顺序也相应发生变化。这时bug出现了，我们第三个子组件经过筛选后，来到了第一位，这时它data中由item内值

Vue(v2.6.11)万行源码生啃，就硬刚！

掘金安东尼

07-06

2219

玩归玩，闹归闹，Vue 源码要知道。

参与评论您还未登录，请先登录后发表或查看评论

Vue中数组操作可能会出现的问题

qq_39807853的博客

08-26

1379

Vue中操作数组数据错乱或者页面不响应

Vue中使用v-for不能用index作为key值

weixin_43487782的博客

09-17

1356

今天在改一个项目，有一个<el-tabs>的列表循环，需要根据权限控制列表项的显示，代码如下： <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in accessTabs" :key="index" :label="item.label" :name="i

v-for 遍历的时候，数据不正确

chengchong_cc的博客

04-03

347

原来写的是:key=”index” 后来改成这里样就好了。

【vue】v-for循环样式乱

SZnAl的博客

03-02

1269

vue中，使用v-for进行后端数据向前台渲染时，排好的版面错乱原因：在li上使用v-for，而非ul <ul> <li v-for="(v,i) in data" :key="i"> <img src="../../assets/everyday1.jpg" alt="" /> <p>{{v.title}}</p> <p>{{v.price}}</p> </li&

前端一面高频vue面试题总结

bb_xiaxia1998的博客

10-26

589

其基本实现原理需要做的事多点（输出完整 HTML），除了，还需如数据获取填充至、客户端混合（）、缓存等等。相比于其他模板引擎（, 等），最终要实现的目的是一样的，性能上可能要差点事件修饰符v-model 的修饰符键盘事件的修饰符系统修饰键鼠标按钮修饰符v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏（display:none）Proxy 的优势如下:Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说

1. Vue从入门到精通（第一章 vue核心）

cjhxydream的博客

05-24

3139

Vue基础1. Vue简介1.1 Vue是什么？1.2 Vue的作者以及迭代版本1.3 Vue的特点2. 搭建Vue开发环境2.1 安装Vue的方式2.1.1 第一种安装方式：直接使用1. Vue简介 1.1 Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面：将数据变成用户可以看到的界面渐进式：是指Vue可以自底向上逐层的应用对于简单应用，只需要轻量小巧的核心库对于复杂应用，可以引入各种Vue插件 1.2 Vue的作者以及迭代版本 1.3 Vue

前端一面常见vue面试题汇总

bb_xiaxia1998的博客

02-27

473

的问题主要有三个：Proxy的优势如下:proxy详细使用点击查看(opens new window)Object.defineProperty的优势如下:defineProperty的属性值有哪些相关代码如下只会代理对象的第一层，那么又是怎样处理这个问题的呢？监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？组件通信的方式如下：父组件通过向子组件传递数据，子组件通过和父组件通信 2. 子组件向父组件传值绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过监

解释一下每一行的代码： <div id="app">  <div class="form-container"> <input v-model="formData.name" placeholder="姓名"> <input v-model="formData.age" type="number" placeholder="年龄"> <button @click="isEditing ? updateItem() : addItem()"> {{ isEditing ? '更新' : '添加' }} </button> </div>  <ul> <li v-for="(item, index) in items" :key="item.id"> {{ item.name }} - {{ item.age }} 岁 <button @click="editItem(index)">编辑</button> <button @click="deleteItem(index)">删除</button> </li> </ul> </div> <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { items: [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ], formData: { name: '', age: '' }, currentIndex: null, isEditing: false }, methods: { addItem() { if (!this.validateForm()) return this.items.push({ id: Date.now(), ...this.formData }) this.resetForm() }, editItem(index) { this.formData = { ...this.items[index] } this.currentIndex = index this.isEditing = true }, updateItem() { if (!this.validateForm()) return Vue.set(this.items, this.currentIndex, { ...this.formData, id: this.items[this.currentIndex].id }) this.resetForm() }, deleteItem(index) { this.items.splice(index, 1) }, resetForm() { this.formData = { name: '', age: '' } this.currentIndex = null this.isEditing = false }, validateForm() { return this.formData.name.trim() && this.formData.age > 0 } } }) </script> <style> .form-container { margin-bottom: 20px; } ul { list-style: none; padding: 0; } li { padding: 10px; border-bottom: 1px solid #eee; } button { margin-left: 10px; } </style>

最新发布

03-08

用户可能的疑问点包括：Vue.set的作用，为什么在更新时使用它；splice方法在删除中的应用；validateForm的具体验证逻辑；以及isEditing状态如何切换按钮文本。需要确保这些点都解释清楚。同时，用户可能想知道这段...

Vue：v-for包裹v-if渲染后，渲染先后顺序不同问题

shihezhengshz的博客

03-12

2345

总结来说：el-table内部el-table-column想循环，el-table内el-table-column外套一层template，循环template，防止渲染后顺序出现问题总共四组：v-for+v-if div+div el-table-column+div div+template el-table-column+template ...

vue 中遍历对象显示的顺序不对

halo1416的博客

12-04

9802

一、情况说明：在wacth里面生成了一个日期字符串的的数组（如下图1），如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序（如下图2）！图1 图2 二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了三、解决方法：先给数组排序，在...

使用elementUI插件后v-for遍历时index索引值报错

m0_48994856的博客

10-08

529

使用elementUI插件后v-for遍历时index索引值报错

vue for in 遍历为啥总报错_【前端词典】Vue 使用时常见的 5 个问题

weixin_39925813的博客

12-08

590

前言今天分享 5 个你或许在使用 Vue 开发过程中也遇到的问题。Vue 使用时常见的 5 个问题自定义路径别名可能有些人注意到了，在 vue-cli 生成的模板中在导入组件时使用了这样的语法：import Index from '@/components/Index'这个 @ 是什么东西？后来改配置文件的时候发现这个是 webpack 的配置选项之一：路径别名。我们也可以在基础配置文件...

vue 中$index $key 已经移除了

diaohanliu7622的博客

02-09

297

之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$key}} </li> </ul> 现在已经移除,如果还用的话就会报错:Uncaught ReferenceError: $index i...

VUE中v-for循环根据index来给循环的每个部分添加不同的id名

赶快学习，拉开差距的博客

01-28

6230

VUE中v-for循环根据index来给循环的每个部分添加不同的id名 <div v-for="(item,index) in courses"> <div :id="course(index)"> <span>{{ item.name }}</span> <span>{{ item.teacher }}</spa...

vue获取for循环index_vue 取出v-for循环中的index值实例

weixin_39762348的博客

01-30

2659

一开始接触到vue的for循环就觉得贼好用，重复性的东西再也不用ctrl C+ctrl V了好吗。不仅代码可复用了，而且提高了代码可读性、减轻了工作量，更重要的是写代码都有成就感了。贴出个小小例子：template{{item.name}}{{item.state}}{{item.ip}}{{item.canCPU}}scriptdata(){return {pcState:[{name:'abc...

vue 使用v-for遍历对象，如何保证顺序？

weixin_43814775的博客

12-16

7173

遇到的问题：后端按顺序返回了所有的值data, 所以我用v-for来循环的时候，顺序偶尔对不上！这个就很难受了 为什么？ 1、会先判断是否有iterator接口，如果有循环执行next()方法 2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致如何保证顺序？将对象的键值手动保存在数组中，因为数组的顺序是可以保证的例如：Object.keys() ， Object.values() async refreshIndex(ctx,

VUE v-for 页面序号倒序

javazhang400的专栏

05-12

3334

页面上需要一个倒序的楼层排序，方便查看，不想太麻烦在后台数据处理，前端js也是很强大的备记一下，需要的朋友也可以参考一下 <div v-for="(item,index) in baDeclares"> <div> <span>#{{baDeclares.length-index}}</span> <span >{{item.createdTime}}</span> &...