La directiva v-for no puede leer la prop de nStars para ejecutar el bucle. Mire, estoy tratando de mostrar varias estrellas usando el componente <display-stars> . Pero por alguna razón, el componente no recibe el bucle de ejecución de nStars prop. Este es mi código:
HTML
<h1><display-stars :nStars="3"></display-stars></h1>Lógica
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");Intenté leer los documentos de vue sobre cómo pasar props y cómo usar v-for usando un número entero en lugar de una colección . Podría olvidar algo ya que soy realmente nuevo en Vue 3 , pero vengo de un fondo de reacción.
nStars es un Number . Puede usar v-for solo con matrices u objetos .
Para crear una Array de 3 elementos, puede usar Array.from :
let arr = Array.from({length: 3}); que creará [undefined, undefined, undefined] . (También puede crear matrices con elementos no indefinidos. Consulte MDN ).
Entonces, para repetir los tiempos de nStars en Vue do:
<star v-for="(o,i) in Array.from({length: nStars})" :key="i"></star> donde i es el índice.