Oświadczenie: To jest moja pierwsza próba zbudowania aplikacji MVVM. Nie pracowałem wcześniej z Vue.js, więc możliwe, że mój problem jest wynikiem bardziej fundamentalnego problemu .Vue JS Oglądanie głęboko zagnieżdżonego obiektu
Moim zdaniem mam dwa rodzaje bloków z wyboru:
- Typ 1: bloku/wyboru
- Typ 2: block/nagłówki/pól wyboru
Podstawowa Obiekt ma następującą strukturę:
{
"someTopLevelSetting": "someValue",
"blocks": [
{
"name": "someBlockName",
"categryLevel": "false",
"variables": [
{
"name": "someVarName",
"value": "someVarValue",
"selected": false,
"disabled": false
}
]
},
{
"name": "someOtherBlockName",
"categryLevel": "true",
"variables": [
{
"name": "someVarName",
"value": "someVarValue",
"categories": [
{
"name": "SomeCatName",
"value": "someCatValue",
"selected": false,
"disabled": false
}
]
}
]
}
]
}
Moje cele
wszystkich zaznaczając:
- użytkownik klika pole wyboru, pole zostanie wybrany (wybrane = true)
- Sposób wypala się, by sprawdzić, czy wszelkie inne pola wyboru muszą być wyłączone (wyłączone = true). (Jeśli ta metoda rzeczywiście wyłączone niczego, ale także zwraca się ponownie, ponieważ inne przedmioty mogą być z kolei zależy od pozycji wyłączone)
- Inna metoda aktualizuje kilka innych rzeczy, takich jak ikony itp
Usuwanie wyboru
Użytkownik może kliknąć przycisk "wyczyść", który odznacza wszystkie pola wyboru na liście (selected = false). Działania te powinny również wywołać metody, które ewentualnie wyłącza wyboru i aktualizuje ikony itp
Moja obecna metoda(co nie wydaje się całkiem w porządku)
- wybranego atrybutu z Dane- model jest związany z sprawdzonym stanem elementu checkbox za pomocą dyrektywy
v-model
. - Wyłączony atrybut (z modelu) jest powiązany z klasą elementu i wyłączonym atrybutem. Ten stan jest ustalany za pomocą wyżej wymienionej metody.
- Aby zainicjować metody, które wyłączają pola wyboru i zmieniają niektóre ikony, używam dyrektywy
v-on="change: checkboxChange(this)"
. Chyba muszę zrobić tę część inaczej metoda - clearList jest wywoływana poprzez
v-on="click: clearList(this)"
problemów z mojej obecnej konfiguracji jest to, że wydarzenie zmiana nie jest wypalania gdy pola wyboru są wyczyszczone programowo (tj nie przez interakcje użytkownika).
Chciałbym zamiast
mi się najbardziej logicznym rozwiązaniem byłoby wykorzystanie this.$watch
i śledzić zmiany w modelu, zamiast słuchać zdarzeń DOM.
Gdy pojawi się zmiana, będę musiał zidentyfikować, który dokładnie element się zmienił i działać w tym kierunku. Próbowałem utworzyć funkcję $watch
, która obserwuje macierz blocks
. Wydaje się, że zmienia się to dobrze, ale zwraca cały obiekt, w przeciwieństwie do pojedynczego atrybutu, który się zmienił. Również ten obiekt nie ma wygodnych atrybutów pomocniczych, takich jak $parent
.
Mogę wymyślić kilka hackowatych sposobów na to, aby aplikacja działała (np. Ręczne wywoływanie zdarzeń zmiany w mojej metodzie clearList itp.), Ale mój przypadek użycia wydaje się dość standardowy, więc spodziewam się, że istnieje prawdopodobnie o wiele bardziej elegancki sposób załatw to.
.selected i .disabled są właściwościami anonimowych zmiennych, które należą do tablicy zmiennych. Twój przykład działa, ponieważ jest to tylko pojedynczy obiekt, a nie tablica. – Hendrik
Zrobiłem coś w rodzaju block.checkbox.active, ale to nie działa, dopóki nie dodaję ich w "" jak wspomniałeś powyżej. Dzięki. Teraz działa. –