v-for 范围期望一个整数值但得到 NaN

Posted 2023-02-22

【中文标题】v-for 范围期望一个整数值但得到 NaN

【英文标题】：The v-for range expect an integer value but got NaN

【发布时间】：2021-11-11 14:53:51

【问题描述】：

v-for 指令无法读取 nStars 属性来执行循环。看，我正在尝试使用组件<display-stars> 来显示多颗星。但由于某种原因，组件没有接收到 nStars 属性来执行循环。这是我的代码：HTML

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

逻辑

  const app = Vue.createApp(); // It contains more logic, but it's not relevant.
  app.component("star",  template: `<i class="fas fa-star"></i>` );
  app.component("empty-star",  template: `<i class="far fa-star"></i>` );
  app.component("display-stars", 
    props: ["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>`,
  );

  const componentInstance_vm = app.mount("#app");

我尝试阅读有关 how to pass props 和 how to use v-for using an integer instead of a collection 的 vue 文档。我可能忘记了一些事情，因为我真的是 Vue 3 的新手，但是来自 react 背景。

【问题讨论】：

我认为问题出在您的 keyIndex 上。试试v-for="(i, index) in nStars" :key="index"

【参考方案1】：

nStars 是 Number。你可以使用v-foronly with arrays or objects。

要创建一个包含 3 个元素的 Array，您可以使用 Array.from：

let arr = Array.from(length: 3);

这将创建[undefined, undefined, undefined]。 （您也可以创建包含未定义元素的数组。请参阅MDN。）

所以要在 Vue 中循环 nStars 次：

<star v-for="(o,i) in Array.from(length: nStars)" :key="i"></star>

其中i 是索引。

【参考方案2】：

您是否尝试过使用索引：

<star v-for="(i, index) in nStars" :key="index"></star>

【讨论】：

我仍然遇到同样的错误。