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>

Komentáře

  • Michal Kleiner : Souhlasim s tim, ze pristup bazukou na komara je zde zbytecny. Jakmile se v ramci jedne komponenty nebo modelu musi pouzit $el.querySelector, indikuje to zpravidla spatny navrh nebo nepochopeni moznosti daneho frameworku. — 3.12.2018
  • Andreaw Fean : @jsspace: Díky za ten `computed`. Takhle postavená architektura se mi líbí. Pokud bude nějaká složitá logika, tak můžu ponechat `watch`, který bude nastavovat třeba nějaký atribut, a pak bude v `computed` pojmenovaný ten stav té komponenty a na něj se budu odkazovat. Každopádně si klidně může hlídat i ten atribut... No, a složitá logika toho tlačítka by se musela dělat nějakým přepínáním šablon... To si ještě budu muset donastudovat. — 3.12.2018
  • Andreaw Fean : To `immediate` žel nefunguje, protože pak není dostupný ten element. Což je ale stejně špatná cesta, to vím. — 3.12.2018

Pro zobrazení všech 3 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele Andreaw Fean