Cykly a procházení dat ve Vue.js

Vue obsahuje jednoduchý způsob, jak efektivně procházet pole dat, která získáme různým způsobem.

Například chceme vykreslit jednoduché pole úkolů:

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

Protože entita úkolů může být relativně složitá, je dobrý nápad ukládat data jako pole entit, které mají určité vlastnosti a k tím poté přistupovat.

Například takto:

var app = new Vue({
    el: '#app',
    data: {
        todos: [
            {
                text: 'Naučit se javascript'
            },
            {
                text: 'Naučit se Vue.js'
            },
            {
                text: 'Udělat něco hezkého. :)'
            }
        ]
    }
})

Všimněte si, že uložená data vypadají jako json. Může nám je proto velmi jednoduše předgenerovat webový server, nebo si o ně můžeme požádat ajaxem.

Pokud chcete v Konzoli prohlížeče přidat novou položku, musíme použít trik pro přidání položky do pole: app.todos.push({ text: 'Nová položka.' });