[JewelOfTheNile]

Serwus!
Potrzebuję Waszej pomocy. Robię apkę w #vuejs i gdy pobieram dane i wypisuje je w logach mam coś takiego:

loadSongs: function() {
 var app = this;
 axios.get('http://localhost:3000/songs')
 .then(function(response) {
 this.songs = response;
 console.log(response);
 })
 .catch(function() {
 console.log('Error');
 });
 }

Logi - tablica

Jak widać response.data jest tablicą. Jednak, gdy przypiszę response.data do this.songs to nie jest już to tablica, a obiekt.

loadSongs: function() {
 var app = this;
 axios.get('http://localhost:3000/songs')
 .then(function(response) {
 this.songs = response.data;
 console.log(this.songs);
 })
 .catch(function() {
 console.log('Error');
 });
 }

Logi - tu już jest obiektem

No i tak to wygląda. Potrzebuję tablicy obiektów, ale nie wiem czemu przy przypisywaniu do zmiennej tablica staję się obiektem.

#js #naukaprogramowania #vuejs

[laki1]

@JewelOfTheNile: jak dla mnie to nadal tablica, ale możesz mieć później problem z tym że this.songs nie będzie konkretnie tym this który ci się wydaje ;)

[sokytsinolop]

@JewelOfTheNile: musisz użyć arrow function, bo te nie mają swojego kontekstu, gdy używasz function(){} to this w tej funkcji odwołuje się do ciała tej funkcji a nie do ciała rodzica

[sokytsinolop]

@JewelOfTheNile: jednak nie, jest dobrze.
W JS array to tak na prawdę obiekt, który po prostu ma zdefiniowane funkcje i działa jak tablica.
Wszystko jest ok

[M.....i]

@JewelOfTheNile: sorry za offtop ale wypok wreszcie formatuje kod czy to Twoja sprawka? :D

[laki1]

@Masterczulki: To chyba tylko w appce, na www dalej ssie ( ͡° ͜ʖ ͡°)

[M.....i]

@laki1: hah faktycznie

[JewelOfTheNile]

Bo potrzebuję wpisać te dane do tabeli.

| {{ song.name }} | {{ song.artist }} | {{ song.album }} | {{ song.genre }} | {{ song.duration }} |

Jednak zauważyłem, że wyświetlając {{ songs.length }} pojawia się cały czas zero. Inne zmienne zmieniają wartość, a tu cały czas jest pusta tablica mimo, że przypisuje jej wartość.

Tu cały kod

[JewelOfTheNile]

@sokytsinolop: @laki1:
Tak jakby w metodzie loadSongs do tablicy songs nic nie było przypisywane i cały czas jest pusta.

[sokytsinolop]

musisz użyć arrow function, bo te nie mają swojego kontekstu, gdy używasz function(){} to this w tej funkcji odwołuje się do ciała tej funkcji a nie do ciała rodzica

@JewelOfTheNile:

[JewelOfTheNile]

@sokytsinolop: @laki1:
Tak zadziałało

[laki1]

@JewelOfTheNile: zrób sobie console.log(this) przed this.songs = response;
To zobaczysz do czego przypisywałeś tablice, musisz sobie doczytać o tym jak działa this

[sokytsinolop]

@JewelOfTheNile: no, czyli bez app ale z arrow function też by zadziałało

[JewelOfTheNile]

@laki1: @sokytsinolop:
Mam jeszcze jedno pytanie. Przy dodawaniu nowej piosenki nie odświeża się tabela. Tablica się zmienia, lecz tabela dopiero odświeżeniu strony.

[sokytsinolop]

@JewelOfTheNile: spróbuj
this.$forceUpdate()
z tego co wiem to Vue ze wzlędu na kompatybilność z jakimś starszym IE ma / miało problem z śledzeniem zmian w obiektach. Chociaż tutaj jest to array więc w sumie powinno działać. Nie wiem, spróbuj

[kmiasko]

@JewelOfTheNile: Nie pisałem w Vue ale generalnie monitorowanie zmian odbywa się przez porównywanie referencji do obiektów, więc jeśli dodajesz element przez push to nie zmienia się referencja do tablicy i pewnie dlatego nie odświeża. Spróbuje przez staraTablice = [...staraTablica, nowyElement];