• 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
153 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 112 wizyt
pytanie zadane 5 października 2017 w JavaScript, jQuery, AJAX przez szustka124 Gaduła (4,420 p.)
0 głosów
1 odpowiedź 57 wizyt
pytanie zadane 23 maja w JavaScript, jQuery, AJAX przez Bakr Mądrala (6,740 p.)
0 głosów
1 odpowiedź 125 wizyt
pytanie zadane 27 grudnia 2018 w JavaScript, jQuery, AJAX przez Arcix Nowicjusz (160 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

66,478 zapytań

113,251 odpowiedzi

239,818 komentarzy

46,619 pasjonatów

Przeglądających: 242
Pasjonatów: 6 Gości: 236

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.

...