记录一次 重复键“0“ 报错

结构

<el-scrollbar style="width:100%; height:100%" class="scrollbar-view">
  <el-row v-for="(item, index) in materialGet" :key="index">
    <p>{{ item.group_name }} :</p>
    <el-col :span="6" v-for="(pic, k) in item.image_v2" :key="k">
       <el-image style="width: 160px; height: 90px" :src="pic.pictureImage" fit="scale-down"></el-image>
     </el-col>
     <el-col :span="6" v-for="(vid, j) in item.video_v2" :key="j">
       <el-image style="width: 160px; height: 90px" :src="vid.imageUrl" fit="scale-down"></el-image>
      </el-col>
   </el-row>
</el-scrollbar>

报错原因

按照上面所见, 在一个v-for循环里有两个v-for循环, 当两个数组里只有一个存在数据时, 页面无报错, 当两个数组都存在数据时, 报错重复键 0

解决方案

<el-col :span="6" v-for="(pict, k) in item.image_v2" :key="k + 'r'">

在其中一个v-for循环的key值后面加一个区分的值即可