• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Szablon Vue - wyświetlanie elementów tablicy

0 głosów
308 wizyt
pytanie zadane 24 października 2017 w JavaScript przez szustka124 Gaduła (4,420 p.)

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

1 odpowiedź

0 głosów
odpowiedź 24 października 2017 przez szustka124 Gaduła (4,420 p.)

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?

Podobne pytania

0 głosów
2 odpowiedzi 170 wizyt
pytanie zadane 5 października 2017 w JavaScript przez szustka124 Gaduła (4,420 p.)
0 głosów
1 odpowiedź 118 wizyt
pytanie zadane 23 maja 2019 w JavaScript przez Bakr Mądrala (6,880 p.)
0 głosów
1 odpowiedź 842 wizyt
pytanie zadane 27 grudnia 2018 w JavaScript przez Arcix Nowicjusz (180 p.)

87,907 zapytań

136,494 odpowiedzi

304,314 komentarzy

58,286 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...