Vue.js：同一视图中渲染多个带不同值的组件问题

看起来你遇到的核心问题是所有StarRatingReadonly组件实例共享了同一个状态，导致它们无法根据各自传入的rating值独立显示星星状态。下面是具体的排查和解决思路：

问题根源分析 #

如果你的组件内部依赖了全局变量、未响应式的内部状态，或者没有根据传入的rating props实时计算星星状态，就会出现所有组件显示相同结果的情况。比如组件里如果用了一个固定的currentRating变量，没有随着props更新，所有实例都会复用这个值。

修复方案：让组件基于props独立计算状态 #

我们可以把组件改成纯展示型组件，完全依赖传入的rating props来生成每颗星的状态，不需要内部可变状态。这样每个循环出来的组件实例都会根据自己的rating值独立渲染。

修改后的组件代码 #

<template>
  <div class="star-rating">
    <!-- 循环生成5颗星，每颗星的状态由计算属性决定 -->
    <span 
      v-for="(isFilled, index) in starStates" 
      :key="index"
      :class="{ 'green-star': isFilled, 'gray-star': !isFilled }"
    >★</span>
  </div>
</template>

<script>
export default {
  name: 'StarRatingReadonly',
  props: {
    rating: {
      type: Number,
      required: true,
      // 添加验证确保rating在合理范围内
      validator: (value) => {
        return value >= 0 && value <= 5;
      }
    }
  },
  computed: {
    starStates() {
      // 生成包含5个元素的数组，每个元素标记对应位置的星星是否为绿色
      return Array.from({ length: 5 }, (_, i) => i + 1 <= this.rating);
    }
  }
}
</script>

<style scoped>
.star-rating {
  display: flex;
  gap: 4px;
}
.green-star {
  color: #2ecc71;
}
.gray-star {
  color: #bdc3c7;
}
</style>

你的循环代码无需修改 #

你原来的循环渲染代码是正确的，保持不变即可：

<StarRatingReadonly :rating="i" v-for="i in 5" :key="i"></StarRatingReadonly>

为什么这个方案有效？ #

1. 计算属性starStates：每个组件实例都会根据自己的rating props生成独立的星星状态数组，完全响应式，props变化时自动重新计算。
2. 无内部可变状态：组件不再依赖任何全局或共享的变量，每个实例都是独立的。
3. 样式作用域：用scoped样式确保组件的星星样式不会和其他组件冲突。

这样修改后，你会看到从1到5的每个StarRatingReadonly组件分别显示1到5颗绿色星，剩下的为灰色星，完全符合你的预期。

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