Vue JS Part: 9 (VueJS List Rendering)

To render arrays and objects in VueJS, List Rendering is used.

VueJS v-for Directive

In VueJS, v-for directive allows us to run loops between array items. And the loop that we will run with v-for, we use this syntax in item in list as the value of v-for. That is, the list here will be the name of the array, and the item is the handler of the array element. Let’s look at an example:

<html>
   <head>
      <title>VueJs v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <ol>
         <li v-for="todo in todos">
            {{ todo.text }}
         </li>
      </ol>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
            ]
         }
      })
      </script>
   </body>
</html>

Output

But you can also print the keys if you want. See the example below:

<html>
   <head>
      <title>VueJs v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <ol>
         <li v-for="(todo,index) in todos">
          {{ parentMessage }} - {{ index }} - {{ todo.text }}
         </li>
      </ol>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
            parentMessage:"Parent",
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
            ]
         }
      })
      </script>
   </body>
</html>

Output

You can also use ‘of’ keyword instead of ‘in’ keyword in v-for.

<html>
   <head>
      <title>VueJs v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <ol>
         <li v-for="(todo,index) of todos">
            {{index}}=>{{ todo.text }}
         </li>
      </ol>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
            parentMessage:"Parent",
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
            ]
         }
      })
      </script>
   </body>
</html>

Output

Use of v-for in Object

<html>
   <head>
      <title>VueJs v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <ol>
         <li v-for="(info,index) in book">
          {{index}}:{{ info }}
         </li>
      </ol>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
            book: {
              Title: 'PHP Beginning to Advance',
              Author: 'Masud Alam',
              Published: '2016-04-10'
              }
            }
      })
      </script>
   </body>
</html>

Output

You can also find the numerical index of its properties from the object.

<html>
   <head>
      <title>VueJs v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <ol style="list-style: none;">
         <li v-for="(info,index,key) in book">
          {{key}}:{{index}}:{{ info }}
         </li>
      </ol>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
            book: {
              Title: 'PHP Beginning to Advance',
              Author: 'Masud Alam',
              Published: '2016-04-10'
              }
            }
      })
      </script>
   </body>
</html>

Output

Use of v-if with v for:

When both v-for and v-if are used in the same node, the v-for directive is in higher priority than v-if. Which means v-if will run differently in each loop. See the example below:

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

  • Apple
  • Banana

Notice, here are the items that have the show value given true.

We will now see a practical example of displaying data entered into an array with v-for

<!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":"Masud Alam"},{"name":"Zunayed Khan"}],
            },
            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

Display Filtered / Sorted Results with v-for:

<html>
   <head>
      <title>v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <h2>Even Numbers</h2>
      <ul style="list-style: none;">
        <li v-for="n in evenNumbers">{{ n }}</li>
      </ul>
      <h3>Odd Numbers</h3>
      <ul style="list-style: none;">
        <li v-for="n in oddNumbers">{{ n }}</li>
      </ul>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
         data: {
          numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
        },
        computed: {
          evenNumbers: function () {
            return this.numbers.filter(function (number) {
              return number % 2 === 0
            })
          },
         oddNumbers: function () {
            return this.numbers.filter(function (number) {
              return number % 2 === 1
            })
          }
        }
      })
      </script>
   </body>
</html>

Output

Display numbers within a specific range with v-for:

<html>
   <head>
      <title>v-for directive</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="app-4">
      <div>
  <span v-for="n in 10">{{ n }} </span>
</div>
</div>
      <script type = "text/javascript">
        var app4 = new Vue({
         el: '#app-4',
      })
      </script>
   </body>
</html>

Output