Programozás Vue.js Events

VueJS Events - Események Gergővel

Nincs .js kód eseménykezelés nélkül. Ez a Vue.js -ben nagyon elegánsan van megoldva, nézd meg a videót.

Videós magyarázat


Forráskód a Github -on:

Github repo

Szöveges segítség

Nem bonyolult a dolog, ahogy a Vue.js -ben semmi sem.

  • v-on:<event-name>="<event-handler>" ezzel állítod be az eseménykezelőt. Ahogy látszik is, kell az esemény neve és az eseménykezelő függvény, ami lehet inline is, azaz nyugodtan beleírhatod az idézőjelek közé.
  • @<event-name>="<event-handler>" ez csak abban tér el az előzőtől, hogy kukaccal kezdődik, ez az egyszerűsített írásmódja a dolognak.
<div class="add-item-form">
    <input 
        v-model="newItem.label" 
        v-on:keyup.enter="items.push(Object.assign({}, newItem))"
        type="text" 
        placeholder="Add on item">
    <button 
        class="btn btn-primary" 
        v-on:click="items.push(Object.assign({}, newItem))">
            Save Item
    </button>
</div>

Ahogy látod, a fenti példában van egy esemény a gombon és az input elemen is. A különbség az, hogy az inputon van még rajta egy külön finomítás is:
v-on:keyup.enter ez azt jelenti, hogy azon belül, hogy billentyű esemény, az enter leütéséről van szó.

Object.assign

Van egy trükk a kódban, úgy kezdődik, hogy Object.assign.

v-on:click="items.push(Object.assign({}, newItem))"

Mi ez? Arról van szó, hogy ha simán pusholom a newItem obektumot az items tömbbe, akkor mindig ugyanaz a newItem fog belekerülni, sok példányban. Mind ugyanarra a newItem -re fog mutatni. Ha az egyiket módosítom, módosul a többi is.
Erre jó orvosság, hogy lemásolom a newItem objektumot és a másolatát teszem be a tömbbe. Így már mindegyik önálló objektum lesz.

Folytatása következik ...