Vue中两个v-for循环使用重复key值的问题求助

问题核心是Vue要求同一渲染上下文中的v-for key必须唯一，你现在两个循环都用数组索引当key，必然会出现重复值（比如两个数组的第一个元素key都是0），导致虚拟DOM Diff逻辑出错。

下面是两种可行的解决办法：

方法一：使用唯一标识作为key（推荐） #

本地Todo：添加唯一ID #

修改本地Todo的数据结构，给每个新增的Todo分配一个唯一ID，比如利用你已有的todoKeys自增：

// 假设你有添加Todo的方法，修改成这样
addTodo() {
  this.todos.push({
    id: ++this.todoKeys,
    title: this.todo
  })
  this.todo = ''
}

GitHub Issues：利用自身唯一ID #

GitHub API返回的Issue对象自带id或number字段（都是唯一值），直接用这个当key即可。

然后更新v-for代码：

<TodoItem
  v-for="(todo, index) in todos"
  :key="todo.id"
  :title="todo.title"
  @delTodo="removeTodo(index)"
/>
<TodoItem
  v-for="(issue, index) in issues"
  :key="issue.id" <!-- 或者issue.number，按需选择 -->
  :title="issue.title"
  @delTodo="closeIssue(index)"
/>

方法二：给key添加前缀区分（快速临时方案） #

如果不想修改数据结构，可以给两个循环的key添加不同前缀，确保全局唯一：

<TodoItem
  v-for="(todo, index) in todos"
  :key="'local-' + index"
  :title="todo"
  @delTodo="removeTodo(index)"
/>
<TodoItem
  v-for="(issue, index) in issues"
  :key="'github-' + index"
  :title="issue.title"
  @delTodo="closeIssue(index)"
/>

额外优化：TodoItem组件简化 #

你当前的TodoItem组件把props的title存到data里是多余的，props本身是响应式的，直接使用即可，这样能避免不必要的状态维护：

<template>
  <div>
    <el-col :span="12">
      <el-card class="box-card" shadow="hover" style="margin: 5px 0">
        <el-row :gutter="12">
          <el-col :span="21">{{ title }}</el-col>
          <el-col :span="3">
            <el-button
              type="success"
              icon="el-icon-check"
              circle
              @click="$emit('delTodo')"
            ></el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </div>
</template>

export default {
  name: 'TodoItem',
  props: {
    title: String
  }
}

内容的提问来源于stack exchange，提问作者Agustin Oviedo