I recently implemented a method that calls an AJAX request to my API and the response that it returns is being assigned to an array. In the template section, I am using the v-for directive to display the data. Surprisingly, it only renders once after I make changes to the data being displayed. Upon refreshing the page, the data does not appear anymore.
There are no errors in the console, and Vue confirms that the array is filled with the returned response.
Template:
<template>
<div class="row">
<div class="col-12">
<h5 class="component-title">Game board</h5>
<button v-for="number in board" v-bind:key="number.results" :class="'col-1 btn btn-'+number.colors">{{number.positionToId}}</button>
</div>
</div>
</template>
Script section:
import RouletteApi from "@/services/api/Roulette";
export default {
name: "GameBoard",
data() {
return {
board: []
};
},
created() {
this.getBoardLayout();
},
methods: {
getBoardLayout() {
RouletteApi.getLayout().then(response => {
//this.rLayout.orgResponse = response;
for (var i = 0; i < response.slots; i++) {
this.board[i] = {
results: response.results[i],
positionToId: response.positionToId[i],
colors: response.colors[i]
};
}
});
}
}
};
Any idea what could be causing this issue?