Vue子组件v-for遍历rating prop未按传入值循环渲染问题求助

两个叠加问题共同导致v-for无法按预期循环：

• 父组件传值类型错误：你在App.vue中写的<ratings rating="4"></ratings>属于静态文本传值，这种写法传入的prop是字符串类型的"4"，并非你预期的数字类型4。你在h1标签里能正常看到显示的4，是因为字符串"4"转成页面文本时和数字4的显示效果完全一致，肉眼很难察觉类型差异。
• v-for遍历规则有明确的类型要求：只有当遍历目标是数字类型时，v-for才会按照“从1到该数值循环N次”的逻辑渲染；如果传入的是字符串类型的"4"，v-for会将其当成普通可遍历字符串处理，最终只会渲染1次（把单个字符"4"作为遍历项），完全达不到渲染4个星标的预期效果。

• 修正父组件的传值写法，用动态绑定保证传入数字类型的值：
  把原来的静态传值调整为：
  <ratings :rating="4"></ratings>
  这里的冒号是v-bind的简写，会告诉Vue引号内的内容是JS表达式而非静态字符串，最终传入子组件的就是真正的数字4，可正常触发v-for的数字循环逻辑。
• 推荐做严谨性优化：给子组件的prop增加类型校验，从根源上避免传参类型不匹配的问题。
  把原来数组写法的props替换为带校验的对象写法：

  props: {
    rating: {
      type: Number,
      default: 0,
      // 适配星级评分的常规取值范围
      validator(value) {
        return Number.isInteger(value) && value >= 0 && value <= 5
      }
    }
  }
  

  加完校验后，但凡后续传入的prop类型不对、数值超出合理范围，Vue会直接在控制台抛出明确警告，无需再靠肉眼排查“显示一致但类型不匹配”的隐性问题。

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