vue循环嵌套循环,警告:检测到重复的键

<view class="contents" v-for="(item,index) in listData" :key="item">
	<view class="left">
		<image  @click ="tocontact()" :src="item.WeiBoList.Photo"></image>
	</view>
	<view class="right">
		<div class="div1">
		    <text class="text1"  @click ="tocontact()">{{item.WeiBoList.Name}}</text>
			<view class="button">联系TA</view>
		</div>
		<div class="div2" @click="todetails()">
			<text>{{item.WeiBoList.ArtContent}}</text>
		</div>
		<div class="div3">
			<image v-for="(sitem,index) in item.WeiBoImagesList" :key="sitem" :src="$sltUrl+sitem.Photo" mode=""></image>
		</div>
		<div class="div4">
			<text>{{item.AddTime}}</text>
			<view class="div4right">
				<text><i class="iconfont icon-zhuanfa"></i>分享</text>
				<text><i class="iconfont icon-weibiaoti-"></i>评论</text>
				<text><i class="iconfont icon-zan"></i>赞</text>
			</view>
		</div>
	</view>
</view>

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

 v-for="(item,firstIndex) in listData1" :key="'listData1'+firstIndex"

 v-for="(item,secondIndex) in listData2" :key="'listData2'+secondIndex"


 v-for="(item,thirdIndex) in listData3" :key="'listData3'+thirdIndex"


这三个例子 看明白 你以后就知道怎么处理v-for 的key了

 

看你循环的id(主键)用于删除或编辑的值是什么,是不是重复了还是取错值了,例如取userId,你取成别的了,这个就是提示你有多条数据的主键相同,比较,编辑,删除的时候回出错

你的key值要是唯一值,其次key最好是字符串number类型,其他就会出现警告

第一行的key不要使用item,你的item在这里是一个对象,会自动调用toString()方法,所以会是[object Object], 所以尽可能的使用item.id或者其他的不会重复的属性来作为循环的key

 v-for="(item,firstIndex) in listData1" :key="'listData1'+firstIndex"

 v-for="(item,secondIndex) in listData2" :key="'listData2'+secondIndex"


 v-for="(item,thirdIndex) in listData3" :key="'listData3'+thirdIndex"


这三个例子 看明白 你以后就知道怎么处理v-for 的key了