Introduction to Vue.js List
List in vue.js is defined as similar to other programming languages such as items are connected to parent item in a consecutive structure that means the items are attached to one below the other is known as lists in vue.js. In general, to render the list in vue.js is to have nested elements or items one below the other using a Vue.js directive such as v-for which we can display the items or elements of an array in a sorted way or rearrangement of original elements or data in the array so to get such sorted array in Vue.js it is known as rendering a list using list concepts.
Working of Vue.js List
In this article, we will discuss how to create lists like structure in a Vue app which means rendering lists from an array of data into the sorted or particular arrangement of data is known as rendering lists in vue.js. This process or creating a list like structure in vue.js is done by using a directive known as v-for directive. In vue.js directives are nothing but a special type of token which will invoke a DOM element to do some work and this it informed by the library to the DOM element to perform or to do as specified. So the v-for is a directive which is inbuilt in vue.js and which allows the user to loop inside of the template which for each item or element in array with the repeated rendering of template feature in vue.js. Therefore in today’s world is dealing with digital marketing which includes web development were in the front-end where the rendering list is most widely used in such applications. Now we can see on Instagram or Facebook social media itself where we can see a list of posts, a list of friends, a list of followers, etc. So in such applications having dynamic data also uses the concept of the list in vue.js
Example of Vue.js List
So let us have a small example to demonstrate the v-for directive for displaying the list in the Vue app. This can be done as shown in the below example:
Code:
<html>
<head>
<title>Educba - Vue.js list</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:left;">
<ul id="vueapp">
<li v-for="e in items" :key="e.message">
{{ e.message }}
</li>
</ul>
</div>
<script type = "text/javascript">
var vueapp = new Vue({
el: '#vueapp',
data: {
items: [
{ message: 'Educba Training Institute' },
{ message: 'Python' },
{ message: 'Java' },
{ message: 'Perl' }
]
}
});
</script>
</body>
</html>
Output:
In the above program, we have included the script tag in the head tag itself for running js file within this HTML file which is generally done in “index.html” which this script tag will have the type declared as javascript or text format and it is necessary to mention the source “src” so that we can run vue.js directly in this “index.html” and now within body tag, we include <div> tag just for including the HTML part of the vue.js where we will include id to get it connected with the Vue app id than to display the elements in the list form we are using <li> tag in HTML so using this <li> tag we can declare a directive called v-for directive within the <li> tag which works similar to as “for loop” in any programming languages with key attribute specified because it helps not to create them every time the list changes or this attribute will create a unique relationship for every item’s or node’s identity. Therefore this v-for directive takes “e” which will act as an alias name of the set or collection of elements/ items declared within the directive which will loop through the array or entire collection of items to display each item on the screen. So in the vue js part or the vueapp declared with “var” where we will be writing the data to be displayed in the list format. So we can see in the above screenshot we have displayed the list.
So we can use v-for directive for using to iterate through the properties of an object using v-for-object instead of v-for in the <li> tag which will display the list of object properties. There is another way or we can say another directive for iterating through the object properties using v-repeat directive but in this directive, the item or instance to be repeated will have two more attributes such as $key and $ value if the values are primitive. This directive can also be used for displaying the range of items as a list. So we can also use this v-for listing the selected elements in the given range that are specified within the v-for using filter function for listing the sorted array as a list and this is demonstrated as below:
4.5 (4,785 ratings)
View Course
Code:
<html>
<head>
<title>Educba - Vue.js list</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<ul id="vueappeven">
<li v-for="i in even(num)">{{ i }}</li>
</ul>
<script type = "text/javascript">
var vueappeven = new Vue({
el: '#vueappeven',
data: {
num: [ 32, 48, 19, 45, 20 ]
},
methods: {
even: function (num) {
return num.filter(function (n) {
return n % 2 === 0
})
}
}
});
</script>
</body>
</html>
Output:
In the above program, we can see we are declaring the range within the v-for tag for listing the even numbers in the given list where it will iterate through the entire given list and displays only the even numbers as shown in the above screenshot. The only difference we have to add this even function within the method prop and then we have to use the filter() function which is used for sorting or we can say to display the filtered items of the given array or set of elements.
Conclusion
In this article, we discussed the vue.js list concept of how we can list any set of elements using this vue directive known as v-for. In this article, we also saw how to demonstrate v-for which works similarly to “for loop” as in other programming languages, and we also the example for the same. We also saw with this directive we can use any attributes such as key, range, etc. In this, we saw why we are using key attributes and we also how we can display any selected or filtered items from the given list using the v-for ranging concept with an example.
Recommended Articles
This is a guide to Vue.js List. Here we discuss the introduction and how to work Vue.js List along with an example and code implementation. You may also have a look at the following articles to learn more –
