v-for="(item,index) in dataList" :key="index"内容重复了怎么办

当你在Vue.js模板中使用`v-for`循环遍历数组，并使用`index`作为`key`属性，如果数据列表(`dataList`)中有内容重复的情况，可能会导致一些意外的结果，比如浏览器无法正确跟踪每个元素的唯一标识，这可能导致渲染异常或性能问题。

解决这个问题的方法有：

1. **修改键值**：确保`index`在数据集中是唯一的，可以尝试使用其他属性作为键值，例如`item.id`，只要这个属性对于每一项来说都是唯一的即可。

<template>
  <div>
    <li v-for="(item, index) in dataList" :key="item.id">{{ item.content }}</li>
  </div>
</template>

2. **去重处理**：在`data`中对`dataList`做去重操作，然后再进行循环展示。

data() {
  return {
    dataList: [...new Set(this.originalData)], // 去除重复项
  };
}

3. **使用自增ID或其他唯一标识**：如果原始数据中的内容本身不可靠，那么可以在循环内部生成一个唯一的索引或ID。

<template>
  <div>
    <li v-for="(item, index) in dataList track-by='uniqueKey'" :key="index">{{ item.content }}</li>
  </div>
</template>

<script>
export default {
  computed: {
    uniqueKey(item) {
      return item.id || (item && ++itemIdCounter); // 使用id，如果没有则自增计数器
    },
  },
  data() {
    let itemIdCounter = 0;
    // ...
  },
};
</script>