Vue短五星评分系统实现问题：hover触发报错及重复Key警告

问题原因 #

1. 重复的key值：两个v-for循环使用的key值会出现重复（比如当rating=2时，第一个循环的key是1、2，第二个循环的key是1、2、3），Vue要求列表的key必须唯一，重复key会导致DOM更新逻辑混乱，触发Duplicate keys detected警告。
2. hover事件传参错误：第二个循环中给stars方法传的是m，而m是从1开始的递增数，不是实际的星级位置。比如当rating=0时，hover第3颗黑色星，会把rating设为3，但当rating变化后，第二个循环的元素数量和key会重新计算，加上之前的重复key问题，最终触发Cannot read properties of undefined (reading 'key')错误。

修复后的代码 #

<template>
  <div class="col-sm border-right">
    <!-- 黄色星星，key加前缀确保唯一 -->
    <span v-for="n in rating" :key="'yellow-' + n">
      <img src="../assets/star1.png" style="width: 6vh;" @mouseover="stars(n)">
    </span>
    <!-- 黑色星星，key加前缀，hover时传入正确的星级位置 -->
    <span v-for="m in 5-rating" :key="'black-' + m">
      <img src="../assets/star0.png" style="width: 6vh;" @mouseover="stars(rating + m)">
    </span>
  </div>
</template>

<script>
export default {
  data(){
    return {
      rating: 0
    }
  },
  methods: {
    stars(n){
      this.rating = n;
    },
  }
}
</script>

修复说明 #

• 给两个v-for的key添加不同前缀（yellow-和black-），确保所有key在整个列表中唯一，解决重复key警告。
• 黑色星星的@mouseover事件修改为传入rating + m，这样hover第k颗黑色星时，实际传入的是当前黄色星数量加上m，对应正确的总星级（比如rating=2时，第一颗黑色星对应2+1=3星），保证星级切换逻辑正确。

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