uniapp v-for key的值不是唯一 会造成数据错误

最新推荐文章于 2024-08-30 10:13:17 发布
最新推荐文章于 2024-08-30 10:13:17 发布
阅读量109 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44005239/article/details/141085598
版权

:key 赋值不是唯一的，页面渲染没问题，click事件传递的数据会是 key重复的数据的第一个，在微信小程序和抖音小程序会出现，H5没问题；

示例中：:key="item.bigCategoryId"  bigCategoryId不是唯一的值，click 事件传递的id会是重复数据的第一个id

weixin_44005239
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 671
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
uni-app实现用接口编写新闻
weixin_69352142的博客
06-22 1291
uni-app是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
Vue-v-for列表渲染中的key
qq_40792800的博客
12-06 1033
在上一章讲到 v-for 列表渲染的博文中，只是说到了 v-for 的基本使用，并没有对其内部进行更深层次的 解读，其实在 v-for 这个指令下，有一个及其关键的 连带属性 key。这个 key 才是 Vue 或者是是 MVVM 框架的 最精髓的东西。 key的使用方式：以数组为例 <ul> <li v-for='(person,index) of personArr' :key='index'> {{person.name}} </li&gt...
记录一个bug ，在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，会导致一些问题！！
柑橘乌云_
06-16 379
在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，然后在循环中有个dom上加了点击事件参数时这个item，那么那个点击事件函数里面打印item是undefined的！
uniapp 中使用v-for 偶发列表不渲染（key值动态变化）
qq_55856928的博客
04-06 557
解决办法是把v-for key值全部取循环的索引。可解决办法是用this.$set来设置变化的数组。
uniapp 关于v-for中key的用处
龙小虬的博客
06-19 4432
在uniapp文档中，说明过 :key 是用来指定列表中项目的唯一的标识符 已经说明了，key标识的只是对象中的一个属性，防止在重新渲染只是出问题，并不能为排序的提供一些作用（当然除了一些特别麻烦的方法），对象属性的内容显示顺序并不会因为key而改变 ...
uniapp 小程序双重v-for 的key bug
草莓Sir的博客
07-16 2118
uniapp 双重v-for 问题描述 在uniapp小程序中，在使用v-for构建双重循环的时候，出现bug，如下: VM8129:1 thirdScriptError Cannot read property ‘2’ of undefined; [Component] Event Handler Error @ pages/appointment/index#nt TypeError: Cannot read property ‘2’ of undefined 问题分析 双重循环，key绑定的
uniapp 未配置appkey或配置错误的解决
weixin_42602900的博客
03-27 1084
uniapp 未配置appkey或配置错误的解决
前端学习笔记
e1592027130的博客
10-19 1178
笔记 小知识 V-ON绑定事件 V-BIND绑定属性 Network中可以查看当前发起的请求 XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中 XHR类型即通过XMLHttpRequest方法发送的请求即AJAX请求 外部JS引入当前Vue实例 函数中传this指向就好了 forEach没有返回值要有返回值的话用map git checkout -b dev origin/dev 建立分支并且从远程拉取 APP的组件生命周期与小程序有出入 scroll view 有滑动时间并把sc
for循环中的key值的重要性(vue,react,uniapp),以及不要使用index作为key
苦夏木禾
04-27 2234
我列举了三个框架语言(vue,react,uniapp),都是虚拟DOM
uniapp打包成app v-for中key值类型
weixin_43963309的博客
03-11 1839
环境：vue3 ，uniapp 问题：在uniapp 非H5端，使用v-for循环，key值用的是item中的某个参数值（string类型）， 在app端，搜索数据的时候，接口返回四条数据，但是app只显示两条数据，后经排查，修改key值后可以正常显示 ...
uniapp的v-for的key不同平台的兼容解决
weixin_30745553的博客
09-17 2546
问题 当同一个页面同时存在两个或两个以上的 v-for 遍历的时候，在不同环境中存在以下两种不同的warning： 代码（两个v-for）： <!-- 标题+列表 开始 --> <view v-for="(list,listindex) in workList" :key="listindex" :class="listindex>0 ? 'margi...
uni-app中v-for点击跳转指定页面
wwf1225的博客
05-10 7086
<template> <view> <!-- banner start --> <view class="banner" @click="goLogin"> <view class="banner-item1"> <image src="...
uni-app自定义组件不能使用v-for解决办法
云间月
06-12 8948
uni-app自定义组件不能使用v-for解决办法 原文：添加链接描述
关于v-for中使用v-if或者v-bind:class失效的问题
weixin_42345079的博客
05-31 5155
在v-for循环出来的列表中使用v-bing动态绑定class、v-show或v-if动态控制个别item   场景一般多用于多项选择原因是在v-for循环的时候 items是动态创建，所以不会被监听并且实时动态控制class解决方法是  vm.$set    官方文档中有介绍我的解决方法使用了框架自带多选按钮，将样式呈现出来但仅仅是样式呈现，在循环items的时候，给它新增属性isSelect然...
uniapp v-show v-for
weixin_42262889的博客
04-11 2689
v-for="(value, index, key) in listData" value指值 key值键 index数组 bug 不能再相互嵌套的时候，同时弄for，否则部分功能失效 <view v-for="(value, index, key) in listData"> <view v-for="(values, indexs, keys) in list">...
【uniapp 解决h5 uni.saveFile 不生效】2种方法解决
最新发布
weixin_49066399的博客
08-30 204
用uni.saveFile h5报错。第二种 可以引用js第三方库来进行保存。先安装 file-saver。查看文档发现不支持h5。
uni-app中分页器的实现
weixin_51480428的博客
08-27 484
刚进页面的时候，接收上一个页面传递过来的查询参数，此时调用后端查询接口，这时候的pageSize和pageNum值是固定的，默认查询第一页，同时将数据总条数设置给total，组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数，传来当前的页数，你再去调用接口查询当前页码的数据即可。
使用 UniApp 实现摄像头视频流的接入并在页面上显示视频流
man2017的博客
08-27 705
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它支持一次开发，多端部署（包括H5、小程序和APP）。下面我将展示如何使用 UniApp 实现摄像头视频流的接入，并在页面上显示视频流。我还会提供一些使用场景以及代码优化建议。
uniapp v-for
09-02
uniapp 中的 v-for 是用来循环渲染数据的指令。它可以用于在模板中循环渲染数组或对象的属性。 在使用 v-for 时，你需要提供一个数据源和一个模板，然后将数据源绑定到模板中。例如： ``` <li v-for="(item, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值