vue报key值重复时解决办法Duplicate keys detected: ''.This may cause an update error.

  1. vue报key值重复
    Duplicate keys detected: ‘’.This may cause an update error.

  2. 为什么for循环后要加key值,否则会爆红,会产生什么影响?
    for循环读取key值时, key需要是唯一的,如果key值重复会导致报错,影响页面渲染卡顿。

  3. 出问题的代码

 <el-col :span="1" v-for="(one,index) in scope.row.day" :key="one">
                <div class="grid-contentA border borderB">{{index}}</div>
                <div class="grid-contentA border borderB grid-color">{{one}}</div>
              </el-col>

4.解决办法

<el-col :span="1" v-for="(one,index) in scope.row.day" :key="one.id+'A'">
                <div class="grid-contentA border borderB">{{index}}</div>
                <div class="grid-contentA border borderB grid-color">{{one}}</div>
              </el-col>

在:key=“one”的值重复了,需要修改成,如,只要key值是惟一的都可以

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="'A'+ i"></div>

<div v-for="(item, i) in items3" :key="'B',+ i"></div>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管火火火

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值