Vue.js - Component Template Not Rendering With V-for

I have method that calls ajax to my api and that response which returns I assigning it to an array. After that in template section with v-for I display data. It render only one tim

Solution 1:

You have no reactivity by using that method to fill your array so try this using push function:

methods: {
  getBoardLayout() {
    RouletteApi.getLayout().then(response => {
      //this.rLayout.orgResponse = response;for (var i = 0; i < response.slots; i++) {
        this.board.push({
          results: response.results[i],
          positionToId: response.positionToId[i],
          colors: response.colors[i]
        });
      }
    });
  }
}

or using this.$set instance method :

methods: {
    getBoardLayout() {
      RouletteApi.getLayout().then(response => {
        //this.rLayout.orgResponse = response;for (var i = 0; i < response.slots; i++) {
          this.$set(this.board,i, {
            results: response.results[i],
            positionToId: response.positionToId[i],
            colors: response.colors[i]
          });
        }
      });
    }
  }