代码 v-for='(v, k) in a' :key='v' ，问题

Question

首先
typeof a === ‘array’

当数据项相同，且:key='v’会报错

代码示例：

<template lang="pug">
  div
    ul
      li(
        v-for='(v, k) in a'
        :key='v'
      ) {{v}} -- {{k}}
</template>

<script>
export default {
  data(){
    return {
      a: [2,2,4],
    }
  },
}
</script>

[Vue warn]: Duplicate keys detected: '2'. This may cause an update error.

found in

---> <App> at app.vue
       <Root>

请问怎么解释？

Answer 1

Jokcy 2019-02-26 20:42:12

因为你a数组里面有两个2，所以你的在一个v-for中有相同的key，这明显就是不符合的，因为一个v-for中不能有相同的key。

• 提问者 kingHawkWin #1

  老师你好，我的意思是你在视频中说:用item去绑定key，最好不要用index绑定key。但是当数组中有相同的item，这时候:key绑定item会报错。所以key绑定数组项有什么优势呢？数组项有重复且不能去重时怎么处理？

• Jokcy 回复 提问者 kingHawkWin #2

  哦，你这个例子就属于极端的例子来，因为你提供的数据本身没有什么意义。一般我们正式项目中需要遍历的数据肯定会有其意义，那么一般也会有id这样的唯一值。在这种数组中，我们用id作为key，即便里面的节点顺序变了，那么dom节点也可以复用。但是你用index作为key，那么节点顺序换了，dom节点复用就会出现问题。

• 提问者 kingHawkWin 回复 Jokcy #3

  老师你好，你的意思是后端传过来的数据格式大概是这样的？：
  {
    usr:[
      {id: "uuid_1", usrname: 'username_1'},
      {id: "uuid_2", usrname: 'username_2'},
      {id: "uuid_3", usrname: 'username_3'},
      {id: "uuid_4", usrname: 'username_4'},
      {id: "uuid_5", usrname: 'username_5'},
         ]    
  }
  
  这样的情况下，:key='k.id'就可以了？

点开查看后面1条评论