Detekce a zpracování uživatelem vyvolaných událostí ve Vue.js

Ve Vue se rozlišuje mezi událostí vyvolanou uživatelem (kliknutí na tlačítko, přejetí prvku, psaní na klávesnici, ...) a událostí vyvolanou aplikací (vysvětlíme si později v jiném článku).

Dejme tomu, že uživatel klikne na tlačítko a my chceme na základě toho něco udělat. Například zobrazit a skrýt element.

<div id="app-5">
    <p>{{ message }}</p>
    <p v-if="show">
        {{ moreMessage }}
    </p>
    <button v-on:click="showMore">Zobrazit podrobnosti</button>
</div>
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Nějaký úvodní text...',
        moreMessage: 'Další skrytý text...',
        show: false
    },
    methods: {
        showMore: function () {
            this.show = true;
        }
    }
})

Po kliknutí na tlačítko Zobrazit podrobnosti se vykreslí nový odstavec s textem na základě podmíněného renderování.

Celý princip událostí je založen na tom, že vždy existuje nějaký posluchač události, což je typicky HTML element, nad kterým se stane akce (například kliknutí). Tento element obsahuje syntaxi pro odchycení události a zavolání metody.

Zachytávání událostí

Události lze zachytávat dvěma způsoby:

  • v-on:udalost=, například v-on:click=
  • zkrácená @udalost=, například @click=

Uvnitř události lze uvést buď název metody pro zavolání, nebo jednoduchý kód provést přímo. Pokud manipulujeme s proměnnou, nepoužívá se slovo this.

První příklad by šel proto zapsat třeba i jako:

<button @click="show = true">Zobrazit podrobnosti</button>

Metody

Metody pro zpracování se nesou přímo v instanci Vue aplikace. Případně si metodu u sebe nese komponenta.

Tento přístup vede k tomu, že jsou aplikace zapouzdřené a každá část aplikace obsahuje jen svůj kód. Díky tomuto přístupu odpadne potřeba volat superglobální funkci někde magicky v aplikaci, která přes CSS selektor upravuje kus šablony, jako to řešila například jQuery.

Metoda se volá svým názvem. Pokud voláme více metod mezi sebou, používáme this.metoda(). Metody mohou přijímat parametry a chovají se jako běžné funkce.

Událost pro získávání dat z formuláře od uživatele

Velmi často potřebujeme přečíst hodnotu z formulářového pole. Vue k tomu nabízí jednoduchou syntaxi.

Návrh Vue je takový, že každé formulářové pole musí mít svojí hodnotu reprezentovanou proměnnou v datové části aplikace a přes konstrukci v-model se data neustále přesouvají tam a zpět. S každým napsaným znakem do textového pole se proto jeho celá hodnota přesouvá do proměnné, odkud je k dispozici například pro šablony, metody nebo jiné komponenty. Díky tomuto přístupu můžeme formuláře také velmi elegantně dynamicky validovat.

Například jednoduché textové pole, co neustále kopíruje svojí hodnoty do šablony.

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

Aplikace zůstává elegantně čistá:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Sem napište text...'
    }
})

Díky tomu, že je Vue reaktivní framework, co reaguje na změnu dat, tak k tomtu dokonce ani nepotřebujeme událost pro změnu obsahu textového pole a aplikace zůstává elegantně čistá.