Updated June 20, 2023
Introduction to Vue.js List
In Vue.js, a list is similar to lists in other programming languages. It refers to a collection of items that are connected to parent items in a consecutive structure, where the items are displayed one below the other. In Vue.js, rendering a list involves using a Vue.js directive called v-for. This directive allows us to iterate over an array and display its items or elements in a sorted manner. By leveraging the v-for directive, we can render a list by arranging and displaying the elements of an array in a desired order.
Working of Vue.js List
In this article, we will explore the process of creating a list-like structure in a Vue.js application. Rendering lists in Vue.js involves taking an array of data and displaying it in a sorted or specific arrangement. This can be achieved using a Vue.js directive called v-for. Directives in Vue.js are special tokens that instruct DOM elements to perform specific tasks. In the case of v-for, it allows us to iterate over an array and generate DOM elements based on each item in the array, effectively rendering a list. By utilizing the v-for directive, we can dynamically generate and display elements in a Vue app based on the data provided in the array. So the v-for is a directive that is inbuilt in vue.js and which allows the user to loop inside of the template for each item or element in the array with the repeated rendering of the template feature in vue.js. 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.
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:
It is necessary to mention the source “src” so that we can run vue.js directly in this “index.html” and now within the 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. As 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 the v-repeat directive. The code is demonstrated below:
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.
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 have an example for the same. We also saw that this directive 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 working of Vue.js List along with an example and code implementation. You may also have a look at the following articles to learn more –
