vue中v-for警告：Duplicate keys detected: '0'. This may cause an update error.

4O4

发布于 2022-04-25 17:09:53

1.2K0

发布于 2022-04-25 17:09:53

文章被收录于专栏：404404

vue中v-for警告：Duplicate keys detected: '0'. This may cause an update error.

代码

// HTML部分
<template>
    <ul>
        <li class="fl" v-for="(item,index) in l_tools" :key="index">{{ item.title }}</li>
        <li class="fr" v-for="(item,index) in r_tools" :key="index">{{ item.title }}</li>
    </ul>
</template>

// JS部分
export default {
  name: "Main",
  data() {
    return {
      l_tools:[
        { title: 'aaa', path: 'aaa' }
      ],
      r_tools:[
        { title: 'bbb', path: 'bbb' },
        { title: 'ccc', path: 'ccc' }
      ]
    }
  }
}

错误

// 控制台报错
[Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

译文：检测到重复键：'0'。这可能会导致更新错误。

很明显，是v-for的key重复导致的冲突。

解决

下面将两个v-for放在不同的元素下

// HTML部分
<template>
    <ul>
        <li class="fl" v-for="(item,index) in l_tools" :key="index">{{ item.title }}</li>
    </ul>
   	<ul>
        <li class="fl" v-for="(item,index) in r_tools" :key="index">{{ item.title }}</li>
    </ul>
</template>

修改key

// HTML部分
<template>
    <ul>
        <li class="fl" v-for="(item,index) in l_tools" :key="index">{{ item.title }}</li>
      	<li class="fl" v-for="(item,index) in r_tools" :key="'the' + index">{{ item.title }}</li>
    </ul>
</template>

控制台：世界和平！