Vue3 v-for范围期望整数却得到NaN，nStars Prop传递问题排查

问题根因 #

报错是因为Vue的Prop命名规范导致nStars Prop未被正确接收，取值为undefined，因此5 - nStars计算结果为NaN，不符合v-for范围要求的整数类型。
Vue中HTML属性是不区分大小写的，驼峰命名的Prop在模板中传递时需要转换为短横线分隔（kebab-case）格式，你当前在HTML中写的:nStars="3"会被浏览器自动解析为全小写的nstars，和组件中声明的驼峰PropnStars无法匹配，导致Prop接收失败。

解决方案 #

两种方案任选其一即可：

1. 调整HTML中Prop的传递格式为短横线写法：

<h1><display-stars :n-stars="3"></display-stars></h1>

Vue会自动将短横线格式的Prop名转换为驼峰格式，和组件内声明的nStars匹配。

2. 若不想修改HTML代码，也可以将组件内的Prop声明改为全小写：

props: ["nstars"],
// 对应模板里的变量也要同步替换为nstars：
template: `<div class="stars-container">
 <star v-for="i in nstars" :key="i"></star> <empty-star v-for="j in (5-nstars)" :key="j"></empty-star>
</div>`

优化建议 #

建议给Prop加上类型校验，方便后续问题排查：

app.component("display-stars", {
  props: {
    nStars: {
      type: Number,
      required: true,
      default: 0
    }
  },
  // 其余模板逻辑保持不变
})

配置后如果Prop未正确传递或者类型不符，控制台会输出明确的校验提示，更容易定位问题。

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