• 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
125 wizyt
pytanie zadane 24 października 2017 w JavaScript, jQuery, AJAX 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 103 wizyt
pytanie zadane 5 października 2017 w JavaScript, jQuery, AJAX przez szustka124 Gaduła (4,420 p.)
0 głosów
1 odpowiedź 96 wizyt
pytanie zadane 27 grudnia 2018 w JavaScript, jQuery, AJAX przez Arcix Nowicjusz (160 p.)
+1 głos
1 odpowiedź 110 wizyt
pytanie zadane 11 listopada 2016 w JavaScript, jQuery, AJAX przez subterras Użytkownik (680 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

62,361 zapytań

108,495 odpowiedzi

226,498 komentarzy

35,441 pasjonatów

Przeglądających: 241
Pasjonatów: 12 Gości: 229

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.

...