nettuts.hu

VueJS Methods + Conditions

Milyen szép is, amikor az ember kiszervezi a működést jól azonosítható, egyszerű metódusokba. Most ráadásul még a v-if és a v-else is képbejön.

Videós magyarázat

Forráskód a Github -on:

Github repo

Szöveges segítség

Nézzük a metódusokat.

methods: {
    addItem: function () {
        this.items.push({
            label: this.newItem,
            purchased: false,
        });
        this.newItem = '';
    },
    changeState: function (newState) {
        this.state = newState;
        this.newItem = '';
    },
},

Itt rögtön két metódus is van.

addItem azért felel, hogy amikor az add gombra kattintanak, akkor a this.items tömb végére beszúr egy új elemet.
changeState ez pedig váltja a state értékét. Ha az érték default, akkor nem látszik a hozzáadás panel, különben igen.

A HTML kódban így vannak a metódusok az eseményekhez kötve:

<button
    v-if="state === 'default'"
    class="btn btn-primary"
    @click="changeState('add')"
    >
        Add Item
</button>
<button 
    v-else 
    class="btn btn-cancel" 
    @click="changeState('default')">
        Cancel Adding Item
</button>

Conditions - v-if és v-else

A Vue -ban az elemeket valamilyen kondíció hatására el lehet távolítani a DOM -ból vagy hozzá lehet adni ahhoz. Nem csak egyszerű elrejtésről van szó tehát.

v-if=<condition> ha igaz a kondícióban megadott változó vagy kifejezés, akkor beszúrásra kerül az elem.
v-else-if=<condition> ugyanaz, csak a következő ág, norál else...if javascript szerkezet.
v-else itt ugye nincs kondíció, ha egyik előtte lévő kifejezés sem volt igaz, akkor jön ő.

<button
    v-if="state === 'default'"
    class="btn btn-primary"
    @click="changeState('add')"
    >
        Add Item
</button>
<button 
    v-else class="btn btn-cancel" 
    @click="changeState('default')"
    >
        Cancel Adding Item
</button>

Itt azt látod, ahogy váltjuk a jobb felső gomot. Amikor rákattintanak, akkor a state értéke megváltozik add -ra. Ennek hatására megjelenik a hozzáadás panel. Ha pedig ismét kattintanak, az érték default lesz, ahogy alapból is. Ekkor eltávolítja a Vue.js a panelt.

Folytatása következik ...