Duplicate keys detected: '113.078410,27.817741'. This may cause an update error.

### 解决 Vue 中 `Duplicate keys detected` 报错的方法

在 Vue 应用程序中遇到 `Duplicate keys detected` 的报错通常是因为存在具有相同父元素的多个子元素，在使用 `v-for` 循环渲染列表时指定了相同的 `key` 值。这种情况下，Vue 可能无法正确追踪每个节点的状态变化，从而引发潜在的更新错误。

为了防止此类问题的发生并确保组件能够高效地重用 DOM 元素以及保持状态的一致性，应当保证每一个通过 `v-for` 渲染出来的元素都有唯一的 `key` 属性[^2]。

当数据项本身具备唯一标识符（如 ID 字段），可以直接利用该字段作为 key；如果不存在这样的属性，则可以考虑组合索引和其他特性来构建独一无二的关键字：

<!-- 不推荐的做法 -->
<span v-for="(item, index) in dataList" :key="index">{{ item.name }}</span>

<!-- 推荐做法 -->
<span v-for="(item, index) in dataList" :key="`${index}-${item.id}`">{{ item.name }}</span>

此外，还可以进一步优化代码结构，使每一项都拥有绝对唯一的键值，比如直接采用对象中的某个唯一属性作为 key:

return {
    dataList: [
        { name: '张三', id: "1" },
        { name: '李四', id: "2" }
    ]
}

<span v-for="item in dataList" :key="item.id">{{ item.name }}</span>

这样做不仅解决了重复键的问题，还提高了应用性能和稳定性。