Data a správa dat ve Vue.js

Ve Vue si každá aplikace drží svoje data zapouzdřená ve vlastní instanci objektu Vue, odkud jsou dostupné jako objekt. Jako data lze vložit jakýkoli validní json.

Vzorový příklad uložení dat:

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Pokud chceme k datům přistupovat, v šabloně stačí napsat pouze název property (například message), v aplikační logice (funkci, metodě, ...) poté ještě doplněné o magickou proměnnou this (například this.message).

Zpracování, přesun a výpis dat

S daty v proměnných lze pracovat různým způsobem.

Nejčastější způsob je vypsání proměnné přímo do šablony:

Vue.component('message-box', {
    template: `<div>{{ message }}</div>`,
    data: {
        message: 'Baraja má rád tučňáky.'
    }
})

Hodnota proměnné message bude vypsána do šablony. Příjemnou vlastností Vue.js je fakt, že se proměnné při výpisu automaticky escapují, proto je nemusíme ošetřovat. Pokud by proměnná obsahovala například HTML kód, budou jeho značky automaticky nahrazeny za HTML entity a proto se nespustí.

Pokud bychom chtěli proměnnou vypsat přesně tak, jak je - tedy bez escapování, použijeme atribut v-html:

Vue.component('message-box', {
    template: `<div v-html="message"></div>`,
    data: {
        message: 'Baraja má rád <strong>tučňáky</strong>.'
    }
})

Pozor:

Nikdy nevypisujte neošetřená data získaná od uživatele! Mohou obsahovat nebezpečný HTML kód, který je schopen rozbít layout stránky, případně vložit zákeřný javascript, co ukradne data vašich uživatelů, aniž by to zjistili.

Přímé vypsání dat do šablony podporuje všechny běžné datové typy. Pokud v proměnné přenášíme například datový json a chceme se podívat na jeho obsah, je možné ho přímo vypsat a zobrazí se jako řetězec.

Reakce na změnu dat

Často potřebujeme vypsat data agregovaně, případně přes ně použít nějaký filtr.

Pro tyto účely slouží metody Computed a Watch, které umí automaticky upravit data podle uživatelské funkce.

Přesunutí dat z jedné komponenty do druhé

Velmi často potřebujeme vykreslit komponentu a té předat nějaká data. K tomu slouží tzv. props:

Vue.component('todo-item', {
    props: ['todo'],
    template: `<span>{{ todo }}</span>`
})

Komponentě pak data předáme při vykreslení:

<todo-item todo="Naučit se Vue.js"></todo-item>

Props todo se chová jako běžná proměnná. Dokonce k ní můžeme přistupovat i uvnitř funkcí a metod pomocí konstrukce this.todo. To se hodí například v situaci, kdy si chceme do komponenty předat nějaká data pro inicializaci a finální render bude vypadat jinak.

Získávání dat přes API

Data je možné získávat přes API. Buď při vykonání určité akce (například kliknutí na tlačítko), nebo při inicializaci komponenty.

O API a ajaxu pojednává samostatný článek.

Předání proměnné do HTML atributu

Velmi často je potřeba předat proměnnou do HTML atributu. Například v případě, když chceme dynamicky dosazovat cestu k obrázku, cíl odkazu a podobně.

Pokud bychom uvedli pouze název proměnné, Vue nebude vědět, jestli chceme použít proměnnou, nebo chceme předat skutečně jen řetězec s názvem proměnné. Existuje proto tzv. dvojtečková anotace. Syntaxe je velmi podobná tomu, jak funguje šablonovací systém Latte.

Toto je naivní způsob, který nebude fungovat:

Vue.component('todo-item', {
    props: ['todo', 'url'],
    template:
    `<div>
        <a href="url">{{ todo }}</a>
     </div>`
})

Pokud chceme, aby url nebyla chápána jako řetězec, ale načetla se jako proměnná, je potřeba doplnit dvojtečku:

Vue.component('todo-item', {
    props: ['todo', 'url'],
    template:
    `<div>
        <a :href="url">{{ todo }}</a>
     </div>`
})

Všimněte si dvojtečky u <a :href="url". Alternativní zápis je <a v-bind:href="url".

Použití v šabloně:

<todo-item
    todo="Naučit se Vue.js"
    url="https://vue.baraja.cz"
></todo-item>