在v-list项间添加分隔符时遇key错误，求解决方案

问题出在Vue的v-for使用规则上：当通过<template>标签循环渲染多个元素时，key属性必须绑定在<template>本身上，而不是它内部的子元素（比如你的<v-list-item>）。

修改步骤很简单，只需要把key从<v-list-item>移到<template>标签即可，同时保留分隔符的唯一key：

<template v-for="(key, index) in filteredKeys" :key="index">
  <v-list-item>
      <v-list-item-content :class="{ 'blue--text': sortBy === key }">
          {{ key }} :
      </v-list-item-content>
      <v-list-item-content class="align-end" :class="{ 'blue--text': sortBy === key }">
          {{ item[key.toLowerCase()] }}
      </v-list-item-content>
  </v-list-item>
  <v-divider v-if="index < filteredKeys.length - 1" :key="`${index}-divider`"></v-divider>
</template>

关键修改说明 #

• 把:key="index"绑定到<template>标签，这是Vue对<template v-for>的强制要求，用于标识每个循环块的唯一性
• 移除<v-list-item>上的:key="index"，避免重复绑定导致的报错
• 保留<v-divider>的:key="${index}-divider"，确保每个分隔符拥有独立的唯一标识，避免渲染混淆

内容的提问来源于stack exchange，提问作者Wael Matar