vue for循环key值 Duplicate keys detected: '1'. This may cause an update error.key

 

 报错原因：用到两个相同的for循环，而这两个for循环的key值是一样的。 关键代码：

<div class="bg">
          <div class="title" >
             <div class="showTitle" v-for="(item,index) in titleArr" :key="'index">{{item}}</div>
             <van-row v-for="(item,index) in list" :key="index">
                 <van-col span="8">{{item.time}}</van-col>
                 <van-col span="8">{{item.sendNum}}</van-col>
                 <van-col span="8">{{item.leftNum}}</van-col>
             </van-row>
          </div>
       </div>
     </div>

解决方案： 将其中一个key值拼接数字或者字符串，区分另一个key值即可！

<div class="bg">
          <div class="title" >
             <div class="showTitle" v-for="(item,index) in titleArr" :key="'item'+index">{{item}}</div>
             <van-row v-for="(item,index) in list" :key="index">
                 <van-col span="8">{{item.time}}</van-col>
                 <van-col span="8">{{item.sendNum}}</van-col>
                 <van-col span="8">{{item.leftNum}}</van-col>
             </van-row>
          </div>
       </div>
     </div>

参考 Duplicate keys detected: '1'. This may cause an update error.key - 腾讯云开发者社区-腾讯云 (tencent.com)