List of items with v-for with data from array
You can use the v-for directive to render a html list of items based on an array.
Syntax:
<ul id='idul'>
<li v-for='item in items'>{{ item }}</li>
</ul>
-
items is the source data array.
-
item is an alias for the array element being iterated on.
Example:
<ul id='idul'>
<li v-for='item in items'>{{ item }}</li>
</ul>
<script>
const ul_items =[ 'Mar', 'Plo' ];
var vm = new Vue({
el:'#idul',
data: {
items: ul_items
}
});
</script>
v-for also supports an optional second argument for the index of the current item.
Syntax:
<ul id='idul'>
<li v-for='(item, index) in items'>{{ index }} - {{ item. }}</li>
</ul>
Example:
<ul id='idul'>
<li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
<script>
const ul_items =[ 'Mar', 'Plo' ];
var vm = new Vue({
el:'#idul',
data: {
items: ul_items
}
});
</script>
You can also use
of as the delimiter instead of
in, so that it is closer to JavaScript's syntax:
<ul id='idul'>
<li v-for='item of items'>{{ item }}</li>
</ul>
v-for with an object
You can also use v-for to iterate through the properties of an object. In the syntax you can use in or of.
<ul id='idul'>
<li v-for='val in obj'>{{ val }}</li>
</ul>
<script>
const ul_obj ={
title: 'Vue.js Tutorial',
code: 'JavaScript',
language: 'English'
}
var vm = new Vue({
el:'#idul',
data: {
obj: ul_obj
}
});
</script>
You can also add a second argument for the property's name (key).
Syntax:
<ul id='idul'>
<li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>
Example:
<ul id='idul'>
<li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>
<script>
const ul_obj ={
title: 'Vue.js Tutorial',
code: 'JavaScript',
language: 'English'
}
var vm = new Vue({
el:'#idul',
data: {
obj: ul_obj
}
});
</script>
When it is used an object,
v-for supports a third argument for index.
Syntax:
<ul id='idul'>
<li v-for='(val, key, index) in obj'>{{index}} - {{ key }} : {{ val }}</li>
</ul>
Example:
<ul id='idul'>
<li v-for='(val, key, ix) in obj'>{{ ix }} - {{key}}: {{ val }}</li>
</ul>
<script>
const ul_obj ={
title: 'Vue.js Tutorial',
code: 'JavaScript',
language: 'English'
}
var vm = new Vue({
el:'#idul',
data: {
obj: ul_obj
}
});
</script>
v-for - detecting changes in source
When it is added, deleted or changed an item in the used array or object, Vue will update the list of elements.
You can use the JavaScript methods for Array and Objects. Test and study the following examples.
1. Adding new item at the beginning of the list:
<div id='demo'>
<button v-on:click='addMsg'>Add item</button>
<ul id='idul'>
<li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#demo',
data: {
items: [ 'Mar', 'Plo' ]
},
methods:{
addMsg:function(ev){
this.items.unshift('Hello');
}
}
});
</script>
2. Delete the element from the beginning of the list:
<div id='demo'>
<button v-on:click='delFirst'>Delete First item</button>
<ul id='idul'>
<li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#demo',
data: {
items: [ 'Mar', 'Plo' ]
},
methods:{
delFirst:function(ev){
this.items.shift();
}
}
});
</script>
3. Modify a specified element of a list with items from an object:
<div id='demo'>
Change language: <input type='text' v-on:input='setLang'/>
<ul id='idul'>
<li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#demo',
data: {
obj: {
title: 'Vue.js Tutorial',
code: 'JavaScript',
language: 'English'
}
},
methods:{
setLang:function(ev){
this.obj.language = ev.target.value;
//Or with this code
// this.$set(this.obj, 'language', ev.target.value);
}
}
});
</script>
Data for list directly in v-for
You can add the array or object with items directly in the construction of the v-for directive.
1. Example with array in v-for:
<ul id='idul'>
<li v-for='item in ["Mar", "Plo", "site"]'>{{ item }}</li>
</ul>
<script>
var vm = new Vue({
el:'#idul'
});
</script>
2. Example with object in v-for:
<ul id='idul'>
<li v-for='(val, key) in {"Tutorial":"Vue JS", "Code":"JavaScript"}'>{{ key }} - {{val}}</li>
</ul>
<script>
var vm = new Vue({
el:'#idul'
});
</script>