Iterating Over Items in Vue.js With V-for

Vue js provides the v-for directive that helps you render multiple elements in one go. Be it to do list or search results, looping is a common requirement for front-end applications. Vue.js supports rendering lists of items onto the browser using the built-in v-for core directive.

Starting off with the Vue.js Hello World application, we can add data that can then be repeated using v-for.

data() {
  return {
    messages:  ['hello', 'vue', 'js'],
    items: [
      {name: 'banana', price: '200'},
      {name: 'apple', price: '102'}
    ]
  }
}

Vue js v-for

The built-in v-for directive helps us to loop on iterable objects or arrays in our data. For example, the messages array in our data can be looped to show a sentence like the following.

<p>
  <span v-for="msg in messages">{{ msg }} </span>
</p>

It provides us the indexed variable in our first parameter such as msg in the above case. Following a similar approach, we can use to display item names and prices in a list. We can access the object properties like item.name.

<ul>
  <li v-for="item in items">{{ item.name }} - {{ item.price }}</li>
</ul>

v-for with objects

Same way as we did with arrays. We can also do it with objects. Let’s say we have an object in our data as following:

data() {
  return {
    user: {
      name: 'John Doe',
      age: '20',
      country: 'USA'
    }
  }
}
<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

The above will output:

  • John Doe
  • 20
  • USA

The v-for with objects also provide two more parameters namely value, key, index. such as the following.

<div>
  <p v-for="(item, key, index) in items">
    {{ index }}. {{ key }}: {{ item }}
  </p>
</div>

Now this will output the following.

  1. name: John Doe
  2. age: 20
  3. country: USA

v-for with range

You can use the range functionality in v-for to loop over items a specific number of times. For example:

<p>Numbers</p>
<ul>
  <li v-for="i in 15">{{ i }}</li>
</ul>

This will loop over <li> element 15 times and print out the list from 1 to 15.

Key

By default when the order of elements in a loop change vue changes the content of the elements. But to avoid that we can use key directive so that vue can keep track of elements and in case of change it can move whole elements up and down.

<ul>
  <li v-for="item in items" :key="item.name">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

Change management in arrays or objects

Out of the box v-for supports array mutation methods. These are push, pop, shift, unshift, splice, sort, and reverse. If any of these operations are performed on an array, the v-for directive updates the view with the new data.

Also, when we replace an array with a new array, Vue finds the most optimized way to update the items.

Vue js v-for problems with change management

Setting items directly

You cannot directly change the elements of an array like this:

data.items[3] = {price: 10, name: 'pineapple'}

This will not re-render the 4th item of the array in the list. This can be avoided using the Vue.set() method as followins:

Vue.set(data.items, 3, {price: 10, name: 'pineapple'});

Modifying array length

You cannot directly manipulate the length of the array to make it smaller like this

data.items.length = 2

instead, we can use the splice method to remove elements that re-renders the UI automatically.

What’s next

Next, you can learn about vue js templating here.

Imad

I am a Software Engineer with ample experience in making games, websites, mobile apps and augmented reality solutions.

Pin It on Pinterest