Updated March 29, 2023
Introduction to Vue.js For loop
Vue.js For loop is one of the dynamic loop it is used to process the list or repeat the user input, and it will give the proper output using the given format of the elements it’s the built-in directives allowed us for creating the loop items in the array of objects using the data model we can create the loop over items in the messages from the array with the help of v-for directive in the elements that should be repeated continuously for each iteration of the loop it will be displayed into the other users those are active in the application.
Syntax:
The Vue.js have different loops for iterating the values in the application among these, for loop is the best way to iterate the user inputs, and we get the proper output results in the given formats.
<html>
<body>
<template id="first">
----some html codes---
</templates>
<script src=https://cdnjs.cloudfare.com/ajax/libs/vue/2.1.8/vue.js>
</script>
<script>
Vue.component('first',{
----vue components attributes and its values----
----default methods which has been called for iterating the array elements—
for(initialisation;condition checking;increment/decrement)
{
---Retrieving and storing the values----
}
}
},
</script></body></html>The above codes are the basic syntax for using the loop (for) iteration and traverse the array elements in the application.
How does For loop works in Vue.js?
- The Vue.js for loop works using the v-for default pre-defined directive that allows us to construct the loop through which the items in the array or objects. The v-for directive is used as the key; we will set the unique identification keys; it does not allow the duplicate keys; we will make sure the attributes of the keys are used as the vue component works that can be satisfied with the user expectations. If suppose we are not using any keys, the Vue will try to make it as the DOM elements as more efficient as possible v-for elements it may have the appear out of the order or the other unpredictable behaviors. If we have a unique number of keys that have their own reference for each element, it can be better than the predicted for how exactly the DOM elements will be manipulated.
- In most of the time, the v-for directive is used to construct the loops over the arrays or objects; it can be defined with the suitable cases where we have to might the just we want to iterate the loops has the limited set number of times. We also filter the datas from before iterating the elements for over it in the templates using the computed property options and filtering methods. In addition to using the loops over the arrays and accessing each element for keeping the tracks for the element index for each item.
- Generally, we use the v-for directives as to the both products and indexes for the both pagination, displaying the index of the list and showing product rankings, etc. By using key-value pairs, we also iterate the array elements indexes; we also have to add the another value to the loop structures; if we use single parameters, the loops iterates all the items suppose we use the second parameter it needs the element items and keys and if we use the third parameter we must use the index as the precious thing of the v-for loop.
Examples of Vue.js For loop
Given below are the examples of Vue.js For loop:
Example #1
Code:
<html>
<head>
<title>Example</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script src="//unpkg.com/vue"></script>
<script type="text/javascript" src="//unpkg.com/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<ul id="first" class="example">
<li v-for="output in sample">
{{ output }}
</li>
</ul>
<script type = "text/javascript">
new Vue({
el: '#first',
data: {
sample: {
booktitle: 'Welcome To My Domain',
bookauthor: 'Sivaraman',
bookpublisheddate: '2020-09-06'
}
}
})
</script>
</body>
</html>Output:
Example #2
Code:
<html>
<head>
<title>Example</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script src="//unpkg.com/vue"></script>
<script type="text/javascript" src="//unpkg.com/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<my-component v-for="input in inputs" :key="input.id"></my-component>
<my-component
v-for="(input, index) in inputs"
v-bind:item="input"
v-bind:index="index"
v-bind:key="input.id"
></my-component>
<div id="first">
<form v-on:submit.prevent="Add">
<label for="Newname">Add Element</label>
<input
v-model="text"
id="Newname"
placeholder="demo"
>
<button>Add Element</button>
</form>
<ul>
<li
is="example"
v-for="(input, index) in second"
v-bind:key="input.id"
v-bind:title="input.title"
v-on:remove="second.splice(index, 1)"
></li>
</ul>
</div>
<script type = "text/javascript">
Vue.component('example', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove Element</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#first',
data: {
text: '',
second: [
{
id: 1,
title: 'Welcome To My Domain',
},
{
id: 2,
title: 'Welcome User',
},
{
id: 3,
title: 'Have a Nice day'
}
],
nextElement: 4
},
methods: {
Add: function () {
this.second.push({
id: this.nextElement++,
title: this.text
})
this.text = ''
}
}
})
</script>
</body>
</html>Output:
Example #3
Code:
<html>
<head>
<title>Example</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script src="//unpkg.com/vue"></script>
<script type="text/javascript" src="//unpkg.com/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div id="first">
<ul>
<li v-for="list in lists(grocerylists)" :key="list.name">
{{ list.name }} - {{ list.id }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#first',
data() {
return {
grocerylists: [
{name: 'dal', id: '15'},
{name: 'rice', id: '23'}
]
}
},
methods:{
lists: function(second) {
return second.filter(function(list) {
return list.id > 13;
})
}
}
})
</script>
</body>
</html>Output:
Conclusion
We can use many number of loops for iterating the input datas in the array or memory devices among these v-for loops is the dynamic loop for accessing the html elements and attributes using the Vue instances for each component.
Recommended Articles
This is a guide to Vue.js For loop. Here we discuss the introduction and working of for loop in Vue.js along with different examples and code implementation. You may also have a look at the following articles to learn more-
