v-for directive allows us to loop through items in an array or object. it requires a special syntax in the form of item in list, where list is the source data array and item is an alias for the array element being iterated on:
v-for directive allows us to loop through items in an array or object. it requires a special syntax in the form of item in list, where list is the source data array and item is an alias for the array element being iterated on:
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
This will output an unordered list with the values from the array.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app2">
<li v-for="item in list">{{ item.name }}</li>
</ul>
<script>
new Vue ({
el: '#app2',
data:{
list: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
]
}
})
</script>
</body>
</html>
Output
Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app3">
<li v-for="(item, index) in list">{{ heading }} : {{ index }} - {{ item.name }}</li>
</ul>
<script>
new Vue ({
el: '#app3',
data:{
heading: 'item with index',
list: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
]
}
})
</script>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app3">
<li v-for="(item, key, index) in list">{{ item }} : {{ key }} - {{ index }}</li>
</ul>
<script>
new Vue ({
el: '#app3',
data:{
list: {
index1: 'Orange',
index2: 'Apricots',
index3: 'Strawberry',
}
}
})
</script>
</body>
</html>
Output
v for with v-ifWhen they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only some items, like below:
<ul>
<li v-for="item in list" v-if="item.show">{{ item }}</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app3">
<li v-for="item in list" v-if="item.show">{{ item.name }}</li>
</ul>
<script>
new Vue ({
el: '#app3',
data:{
list: [
{ name: 'Apple', show: true},
{ name: 'Mango', show: false},
{ name: 'Banana', show: true},
]
}
})
</script>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app4">
<p v-if="error" class="error">{{ error }}</p>
<input type="text" placeholder="Enter your name" name="username" value="" v-model="username" /><button type="button" @click="add">Click me</button>
<ul>
<li v-for="item in users">{{ item.name }}</li>
</ul>
</div>
<script>
new Vue ({
el: '#app4',
data:{
error:'',
username:'',
username1:'',
username2:'',
username3:'',
username:'',
users:[{"name":"Evan You"},{"name":"Vijay Singh"},{"name":"Saarthak Singh"}],
},
methods: {
add() {
if (!this.username)
{
this.error = 'Please enter your name';
return;
}
else
this.error = '';
this.users.push({'name':this.username});
this.username = '';
},
}
})
</script>
<style scoped>
.error {
color:#c82829;
}
</style>
</body>
</html>
Output
{{ error }}