|
|
Opublikowano 20.08.2018 13:05:58
|
|
|
|
Często spotykamy się ze zmianami danych w Vue, ale widok nie może być aktualizowany, więc podsumowałem kilka takich sytuacji:
1. Dla tablicy przeszukiwanej przez v-for, gdy zawartość tablicy używa arr[0].xx =xx do zmiany danych, vue nie może jej wykryćZmiany danych w tablicach: Używamy niektórych metod do manipulacji tablicami, a przy zmianie danych niektórych metod nie może monitorować Vue, podczas gdy innych
Vue owija kilka funkcji operacyjnych tablic, a tablice manipulowane tymi metodami będą monitorowane przez Vue, gdy ich dane się zmieniają:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue2.0 dodaje także metodę do obserwowania Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。 Nie zmieniają one oryginalnej tablicy, lecz zawsze zwracają nową tablicę. Stosując metodę niemutacyjną, możesz zastąpić starą tablicę nową
Vue nie wykrywa tablic, które zmieniają następujące cechy:
(1) Gdy ustawiasz element bezpośrednio z indeksem, vm.items[indexOfItem] = newValue
(2) Gdy modyfikujesz długość tablicy, na przykład: vm.items.length = newLength
Bez zbędnej zwłoki, prześlij kod i dołącz wizualizacje:
Powyższe to dwa rozwiązania dla tablic, w których Vue nie potrafi wykrywać zmian danych
Zmień metodę add() w kodzie na
Notatki dotyczące aktualizacji listy:Logowanie do linku jest widoczne.Wykrywanie aktualizacji tablicy
Dogłębne zagłębienie się w zasady responsywności:Logowanie do linku jest widoczne.
|
Poprzedni:Implementacja Vue jest klikana, aby sprawdzić, a pozostałe nie są wybieraneNastępny:Konfiguracja Sekcja
|
