Vue.js - шаблон компонента не отображается с помощью v-for - PullRequest
Новая
       8

Vue.js - шаблон компонента не отображается с помощью v-for

0 голосов
/ 11 ноября 2018

У меня есть метод, который вызывает ajax для моего API и тот ответ, который возвращает, я назначаю его массиву. После этого в разделе шаблона с v-for я отображаю данные. Он отображается только один раз после того, как я что-то изменил в данных для отображения. После обновления больше не отображается.

В консоли нет ошибок, и vue показывает, что массив заполнен возвращенным ответом.

Шаблон: 

<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>

Сценарий раздела: 

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]
          };
        }
      });
    }
  }
};

Что я делаю не так?

1 Ответ

0 голосов
/ 11 ноября 2018

У вас нет реактивности при использовании этого метода для заполнения массива, поэтому попробуйте это с помощью функции push: 

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]
        });
      }
    });
  }
}

или используя this.$set метод экземпляра: 

 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]
          });
        }
      });
    }
  }
...