The v-for directive is having trouble accessing the nStars prop in order to run a loop. I am attempting to display multiple stars by using the component <display-stars>. However, the component does not seem to be receiving the nStars prop for the loop to execute. Here is my code:
HTML
<h1><display-stars :nStars="3"></display-stars></h1>
Logic
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");
I attempted to consult the Vue docs on how to pass props, and also looked at this Stack Overflow post about using v-for with an integer instead of a collection. Perhaps I overlooked something as I am new to Vue 3 coming from a background in React.