uniapp 小程序双重v-for 的key bug

最新推荐文章于 2023-06-16 14:35:03 发布
最新推荐文章于 2023-06-16 14:35:03 发布
阅读量2k 收藏 3
点赞数
分类专栏： vue uniapp 文章标签： vue 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43141746/article/details/107379949
版权
vue 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
uniapp
8 篇文章 0 订阅
订阅专栏

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绑定的都是index，两层，index相同可能会产生冲突

问题解决

将key绑定为唯一的。
在这里插入图片描述

散装java
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp的v-for的key不同平台的兼容解决
weixin_30745553的博客
09-17 2532
问题 当同一个页面同时存在两个或两个以上的 v-for 遍历的时候，在不同环境中存在以下两种不同的warning： 代码（两个v-for）： <!-- 标题+列表 开始 --> <view v-for="(list,listindex) in workList" :key="listindex" :class="listindex>0 ? 'margi...
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于uniapp小程序端提示v-for 暂不支持循环数据问题的解决方案
cabinx的博客
06-30 7926
关于uniapp小程序端提示v-for 暂不支持循环数据问题解决方案 需求描述: 在uniapp小程序此项目中使用多层for循环时，小程序端提示：uniapp v-for 暂不支持循环数据，以至于获取不到循环的数据。 解决方案: <view v-for="(item,index) in flist" :key="item.id"> <view v-for="item2 in item" @click="navTo(item2.id)" :key="item2.id"&g
uni-app 报错key重复问题
xinTianou123的博客
02-06 399
uni-app报错key重复的坑
记录一个bug ，在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，会导致一些问题！！
柑橘乌云_
06-16 342
在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，然后在循环中有个dom上加了点击事件参数时这个item，那么那个点击事件函数里面打印item是undefined的！
uniapp 关于v-for中key的用处
龙小虬的博客
06-19 4383
在uniapp文档中，说明过 :key 是用来指定列表中项目的唯一的标识符 已经说明了，key标识的只是对象中的一个属性，防止在重新渲染只是出问题，并不能为排序的提供一些作用（当然除了一些特别麻烦的方法），对象属性的内容显示顺序并不会因为key而改变 ...
uniapp打包成app v-for中key值类型
weixin_43963309的博客
03-11 1831
环境：vue3 ，uniapp 问题：在uniapp 非H5端，使用v-for循环，key值用的是item中的某个参数值（string类型）， 在app端，搜索数据的时候，接口返回四条数据，但是app只显示两条数据，后经排查，修改key值后可以正常显示 ...
uniapp - 微信小程序 - 自定义底部tabbar
最新发布
06-26
在开发微信小程序或基于uniapp框架的应用时，自定义底部tabbar是一项常见的需求。底部tabbar作为用户界面的重要组成部分，通常包含多个图标和文字，用于切换不同的页面或功能区域。本篇文章将深入探讨如何在uniapp中...
uniapp开发小程序实现-获取/修改头像昵称（一）
03-10
在本文中，我们将深入探讨如何使用uniapp框架来开发微信小程序，特别关注用户头像和昵称的获取与修改功能。uniapp是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，就能跨平台运行，包括iOS、Android、H5...
uniapp微信小程序上传oss的javascript文件下载
05-15
本文将详细介绍如何使用UniApp结合JavaScript来实现微信小程序上传文件到阿里云OSS并进行下载。 首先，让我们了解几个关键概念： 1. **uni-app**: uni-app是一款由ECharts开发的多端开发框架，它允许开发者编写一次...
Vue中的v-for循环key属性注意事项小结
10-18
`v-for`循环中，`key`属性是一个重要的优化机制，它允许Vue追踪每个节点的身份，以便更有效地更新和重排DOM。以下是关于`v-for`循环中`key`属性的一些关键知识点： 1. **就地复用策略**：Vue默认采用“就地复用”...
uni-app v-for 循环（双重循环）
热门推荐
qq_42401674的博客
03-04 1万+
<template> <view> <view v-for="stuObj in student"> 学生姓名: {{stuObj.name}},学生年龄：{{stuObj.age}}</view> <view> 学生技能： <view v-for = "sk in stuObj.skill"> ...
uniapp 中使用v-for 偶发列表不渲染（key值动态变化）
qq_55856928的博客
04-06 498
解决办法是把v-for key值全部取循环的索引。可解决办法是用this.$set来设置变化的数组。
uniapp tab切换--双重for循环
微风的博客
12-29 1201
<view class="list"> <!-- 这是tab栏 --> <view class="tab-list"> <view class="venue" v-for="(item,index) in arr" :key="index" :class="isActive==index? 'activeColor':''" @click="btn(index)">{{item.type}}</view> .
uniapp报key值重复时解决办法（报错信息：[Vue warn]: Duplicate keys detected:）
weixin_43467567的博客
07-22 2962
报key值重复 Duplicate keys detected: ‘’.This may cause an update error. 为什么for循环后要加key值，否则会爆红，会产生什么影响？ for循环读取key值时， key需要是唯一的，如果key值重复会导致报错，影响页面渲染卡顿。 报错代码： 解决方法： 只要key值是惟一 ...
uni-app v-bind和v-for的使用
雨下听风声
01-25 1174
v-bind的使用 <image v-bind:src="imgUrl"></image> 数据： <script> export default{ data(){ return{ imgUrl:'', arr:[ { name:'张三'， ..
日常笔记一(键值(key)重复的错误,字符串拼串的方法,uni.app 判断平台 )
木子李的博客
03-31 1341
出现的问题 uni-app 页面使用多个v-for渲染数据,产生报键值(key)重复的错误的时候,给其键值单独识别 例如: <view v-for="(item, index) in suggestlist" :key="'2' + index"> <view class="way-content"> <text class="f...
v-for的嵌套循环使用【uniapp】
qq_54568336的博客
04-12 4307
<template> <view class="" > <view class="content" v-for="(item,index) in qqcy"> <view class="box" @tap="skillIdx=index"> 门派：{{ item.address }} 代表：{{ item.represent }} </view> <!-- 要展示的列表 item.member是根据上一层的.
问题九：两个v-for中，内for无法调用外for对象
qq_45279574的博客
07-19 347
两个v-for中，内for无法调用外for对象 解决办法：把v-if 写在template 标签上 原因：首先 vue官方都不推荐 v-if 和 v-for写在一个标签上 (原因:就算写了v-if v-for还是会循环 只是v-for返回的是一个空的值 这样就造成了性能浪费) ...
uniapp双循环v-for
06-20
uniApp中的`v-for`指令用于创建动态渲染列表，它支持两种形式的循环：单层循环（常规循环）和嵌套循环（双层循环）。单层循环通常用来遍历数组或对象的属性，而双层循环则适用于需要对数据集进行两层迭代的情况。 **单层循环示例**: ```html <view v-for="(item, index) in items" :key="index"> <text>{{ item.name }}</text> </view> ``` 在这个例子中，`items`是一个数组，`v-for`会为数组中的每个元素生成一个视图，`item`表示当前迭代的数组元素，`index`则是该元素的索引。 **双层循环示例**: ```html <view v-for="(parentItem, parentIndex) in parentItems" :key="parentIndex"> <view v-for="(childItem, childIndex) in parentItem.children" :key="childIndex"> <text>{{ childItem.content }}</text> </view> </view> ``` 这里，`parentItems`是一个包含子项的数组，内部的`children`属性表示每个父项的子数组。外层循环遍历`parentItems`，内层循环遍历每个父项的`children`。 如果你遇到关于如何使用双层`v-for`的实际问题，或者想要了解如何处理数据结构的变化以适应这种循环，请告诉我，我会帮助你解答。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值