Mam dane wejściowe:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
i w moim komponencie Vue.js mam:
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..
validated
bycie boolean
, może to być 0
albo 1
, ale bez względu na to, jakie wartości są przechowywane w bazie danych, mój wkład jest zawsze wyłączona.
Potrzebuję, aby dane wejściowe były wyłączone, jeśli false
w przeciwnym razie powinny być włączone i można je edytować.
Aktualizacja:
W ten sposób zawsze włącza się dane wejściowe (bez względu na to, czy mam 0 lub 1 w bazie danych):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
Wykonanie tego zawsze wyłączało dane wejściowe (bez względu na to, że mam 0 lub 1 w bazie danych):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">
źródło
true
lub wfalse
zależności od wartości elementu w dbmożesz mieć obliczoną właściwość, która zwraca wartość logiczną zależną od potrzebnych kryteriów.
następnie umieść swoją logikę we właściwościach obliczeniowych ...
źródło
isDisabled()
w HTML, zdefiniowane wData
.Nie trudne, sprawdź to.
jsfiddle
źródło
Twój wyłączony atrybut wymaga wartości logicznej:
<input :disabled="validated" />
Zauważ, że sprawdziłem tylko, jeśli
validated
- To powinno działać jak0 is falsey
... np0 is considered to be false in JS (like undefined or null)
1 is in fact considered to be true
Aby zachować szczególną ostrożność, spróbuj:
<input :disabled="!!validated" />
Ta podwójna negacja włącza
falsey
lubtruthy
wartości0
albo1
dofalse
lubtrue
nie wierzysz mi? wejdź do konsoli i wpisz
!!0
lub!!1
:-)Ponadto, aby upewnić się, że Twój numer
1
lub na0
pewno przechodzi jako liczba, a nie ciąg znaków'1'
lub'0'
wstępnie sprawdzana wartość, którą sprawdzasz,+
np.<input :disabled="!!+validated"/>
Zamienia ciąg liczby na liczbę np.+1 = 1 +'1' = 1
Jak powiedział wcześniej David Morrow, możesz zastosować logikę warunkową w metodzie - daje to bardziej czytelny kod - po prostu powróć z metody warunek, który chcesz sprawdzić.źródło
Możesz manipulować
:disabled
atrybutem w vue.js .Przyjmie wartość logiczną, jeśli to prawda , wówczas wejście zostanie wyłączone, w przeciwnym razie zostanie włączone ...
Coś takiego jak ustrukturyzowane jak poniżej w twoim przypadku na przykład:
Przeczytaj także poniżej:
źródło
Możesz utworzyć obliczoną właściwość i włączyć / wyłączyć dowolny typ formularza zgodnie z jego wartością.
źródło
Spróbuj tego
vue js
źródło
Przełączanie wyłączonego atrybutu wejścia było zaskakująco skomplikowane. Problem był dla mnie dwojaki:
(1) Pamiętaj: atrybut „disabled” wejścia NIE jest atrybutem boolowskim .
Sama obecność atrybutu oznacza, że wejście jest wyłączone.
Jednak twórcy Vue.js przygotowali to ... https://vuejs.org/v2/guide/syntax.html#Attributes
(Dzięki @connexo za to ... Jak dodać wyłączony atrybut w tekście wejściowym w vuejs? )
(2) Ponadto miałem problem z ponownym renderowaniem taktowania DOM. DOM nie aktualizował się, gdy próbowałem przełączyć z powrotem.
W niektórych sytuacjach „składnik nie zostanie ponownie renderowany od razu. Zostanie zaktualizowany w następnym„ tiku ”.
Z dokumentacji Vue.js: https://vuejs.org/v2/guide/reactivity.html
Rozwiązaniem było użycie:
Pełniejszy przykładowy przepływ pracy:
źródło
Można użyć tego warunku dodania.
źródło
Należy pamiętać, że zestawy / mapy ES6 nie wydają się być reaktywne, o ile wiem, w momencie pisania.
źródło