VueJS a inicializace watch rubrika: Programování: JavaScript
2
Andreaw Fean
položil/-a 2.12.2018
ahoj.
Mám takovéto html:
<input v-model="novy" /> <button v-on:click="addItem" name="submit">add Item</button>
A chci sledovat input, a pokud je prázdný, tak button nastavit jako disabled.
Můžu a chtěl bych na to použít sekci watch
nějak takto:
watch: { novy: function() { var btn = this.$el.querySelector('[name="submit"]') btn.disabled = ! this.novy.length } },
Funguje to jak chci, ale je potíž s tím, že na začátku je ten input prázdný, a button je přesto aktivní. V jQuery se to řešilo tak, že se po definování eventů tyto eventy spustili nějak takto:
$('#novy').change(function() {...}).change()
Jak se takováto inicializace udělá správně ve VueJS?
Jak se správně přistupuje k tlačítku?
Díky za odpovědi.
PS: Vím, že bych mohl použít v-show
, ale to bych z edukativních důvodů nechtěl použít.
odkaz
4
jsspace
odpověděl/-a 3.12.2018
upravil/-a 3.12.2018
Ahoj,
zkus neco takoveho:
watch: { novy: { handler: function(oldValue, newValue) { var btn = this.$el.querySelector('[name="submit"]') btn.disabled = ! newValue.length }, immediate: true } }
// Edit
Kazdopadne jdes asi bazookou na komara... bohate by pro ucely zneaktivneni tlacitka stacilo neco takoveho:
data: { novy: '' }, computed: { isDisabled: function(){ return !this.novy; } }
a v template pak
<input v-model="novy" /> <button v-on:click="addItem" name="submit" :disabled="isDisabled">add Item</button>
Pro zobrazení všech 3 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře