VueJs v-for

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

  • {{ item.name }}

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

  • {{ heading }} : {{ index }} - {{ item.name }}

v-for with objects

<!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

  • {{ item }} : {{ key }} - {{ index }}

v for with v-if

When 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

  • {{ item.name }}

Below an example to add a username in an array and display in a listing

<!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 }}

  • {{ item.name }}