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

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

代码

代码语言：javascript复制

// 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>

代码语言：javascript复制

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

错误

代码语言：javascript复制

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

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

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

解决

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

代码语言：javascript复制

// 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

代码语言：javascript复制

// 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>

控制台：世界和平！

总结

两个同级v-for的key不能相同。

error key this

0 人点赞