nettuts.hu

VueJS Computed - a számító

Mit teszel, ha egy adatra nem pont úgy van szükséged, ahogy eltároltad? Nagyon egyszerű, a Vue.js computed objektumát használod.

Videós magyarázat

Forráskód a Github -on:

Github repo

Computed

Úgy működik mint egy getter, azaz csak beírod a nevét és megkapod a metódus által visszaadott étéket.
Először megírjuk a metódusokat a computed objektumon belül:

computed: {
    reversedItems() {
        return this.items.slice(0).reverse();
    },
    sortedItems() {
        return this.items.slice(0).sort( (a, b) => {
            return a.label.localeCompare(b.label);
        })
    }
},

Itt az egyik megfordítja az elemek sorrendjét, a másik rendezi őket.
Ha jól megnézed, látni fogod, hogy mindkét esetben először lemásoltam a tömböt a slice metódussal, hogy ne az eredetit módosítsam.

Alkalmazás

Oké, akkor hogyan tudod használatba venni a computed metódusai által létrehozott értékeket? A HTML részeben úgy hivatkozol rájuk, mintha egyszerű tulajdonságok lennének, azaz nem nem kell utánuk kitenni a zárójeleket, mint a metódusoknál:

<li
    v-for="item in sortedItems"
    :title="item.label"
    @click="togglePurchased(item)"
    :class="{strikeout: item.purchased}"
>
    {{ item.label }}
</li>

Csupán annyi változott, hogy az items helyett a sortedItems elemeit járom be a for ciklussal.

Folytatása következik ...