问题描述
在做vue项目的时候出现了这样的错误
问题分析
我的代码
<view v-for="(imgUrl, index) in imageList" :key="index">
<image :src="imgUrl" mode="aspectFill"></image>
</view>
<view class="image-area" v-for="(img, index) in images" :key="index">
<image :src="img" mode="aspectFill" style="width: 100px; height: 100px;"></image>
</view>
综合报错信息可以推测,问题应该是出在key上
解决过程
将其中一个index改成别的东西代替
<view v-for="(imgUrl, index) in imageList" :key="index">
<image :src="imgUrl" mode="aspectFill"></image>
</view>
<view class="image-area" v-for="(img, indexb) in images" :key="indexb">
<image :src="img" mode="aspectFill" style="width: 100px; height: 100px;"></image>
</view>
这个方法实际上没用,因为实际上两个:key获得都的值是0-imges长度的一组数,重复的是这两组数的并集
比如
imageList的长度为3上面的key获得的值就是0,1,2
imgs的长度为5下面的key获得的值就是0,1,2,3,4
那么值为0,1,2的key就会报错
所以
真正的解决办法
<view v-for="(imgUrl, index) in imageList" :key="index">
<image :src="imgUrl" mode="aspectFill"></image>
</view>
<view class="image-area" v-for="(img, index) in images" :key="index+9999">
<image :src="img" mode="aspectFill" style="width: 100px; height: 100px;"></image>
</view>
给其中一个key加一个基数,让两组数能分开