Szablon Vue - wyświetlanie elementów tablicy

Question

Witam

Gdy tworzę przyciski za pomocą v-for, a następnie próbuję w każdym przycisku wypisać kolejno elementy tablicy, one się nie wyświetlają. Zachowuje się tak, jakby przez cały czas tablica była pusta.

div(class='row expanded')
  div(v-for='(bValue, bKey) in buttons'
      class='container-padding columns'
      :class='[`small-${12/buttons.length}`]')
    div(class='container')
      button(class='bet-button full' :class='[bValue]' @click='bet(bKey)' :disabled='!isDisabled')
        | {{delayedMultiplier[bKey]}}x

 

data() {
    return {
      buttons: [
        'red',
        'green',
        'yellow'
      ],
      multiplier: [],
      delayedMultiplier: [],
      isDelayed: false,
      isDisabled: true
    }
  }

delayedMultiplier[] zmienia się po odebraniu danych od serwera. W konsoli, dane wyświetlają się prawidłowo.
Jak to naprawić?

Answer 1

Naprawiłem, ale nadal nie wiem dlaczego tak to działa.

Dane były zmieniane z opóźnieniem za pomocą setTimeout:

takeDelayMultiplier(newValue) {
    var time = this.isDelayed ? 5200 : 100;

    var self = this;
    setTimeout(() => {
        for (let id in newValue) {
            self.delayedMultiplier[id] = newValue[id];
        }
    }, time);
}

Postanowiłem na chwilę zająć się innym elementem i dodałem blokowanie przycisków na czas oczekiwania na setTimeout().

takeDelayMultiplier(newValue) {
    var time = this.isDelayed ? 5200 : 100;
    this.isDisabled = true;

    var self = this;
    setTimeout(() => {
        for (let id in newValue) {
            self.delayedMultiplier[id] = newValue[id];
            self.isDisabled = false;
        }
    }, time);
}

 

Po dodaniu linijki "self.isDisabled = false;" wszystko zaczęło działać.

Potrafi ktoś wytłumaczyć, dlaczego?