Initially, I utilize a random number generator to create numbers that will be used in my api call
created() {
for (let i = 0; i < this.cellNumber; i++) {
this.rng.push(Math.floor(Math.random() * 671 + 1));
}
These generated numbers are stored in an array called rng. I am displaying a component named Cell using the v-for directive
<div v-for="x in rng" :key="x">
<div class="col-sm-12">
<Cell class="cells" :id="rng[x - 1]"></Cell>
</div>
</div>
The intention is to pass each element 'x' in rng to the Cell component, but despite generating the numbers, they are not being passed to the component. However, if I manually input numbers into the array, then the elements are successfully passed to the Cell component. What would be the most effective approach to overcome this issue? It seems likely that the calculations finish after the component is rendered, raising the question of how to update the component once the prop changes. I attempted using a watch function, but it did not resolve the issue.
Appreciate any guidance on this matter!