Duplicate keys detected: ‘0‘Duplicate keys detected: ‘1‘报错的原因及解决方法

vue项目Duplicate keys detected: '0'Duplicate keys detected: '1'报错的原因及解决方法

前端程序猿微凉

4226人浏览 · 2022-02-17 09:42:09

前端程序猿微凉 · 2022-02-17 09:42:09 发布

打印台报红显示：

Duplicate keys detected: '0'. This may cause an update error.

Duplicate keys detected: '1'. This may cause an update error.

Duplicate keys detected: '2'. This may cause an update error.

原因：

一个template中有两个一样的v-for 需要更改key

<div class="info" v-for="(item, index) in content" :key="index">
    <div class="d1">
            <p v-text="item.time" class="timeBox"></p>
    </div>
</div>
<div class="info2" v-for="(item, index) in content" :key="'index">
    <div class="d2">
          <p v-text="item.time" class="timeBox"></p>
      </div>
</div>

解决办法：

<div class="info2" v-for="(item, index) in content" :key="'different'+index">
    <div class="d2">
          <p v-text="item.time" class="timeBox"></p>
      </div>
</div>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^