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.' })
;