Vue.js Loop Statements

Looping is done using the v-for directive.

The v-for directive requires a special syntax in the form of site in sites, where sites is the source data array and site is the alias for the array element being iterated.

v-for can bind data to an array to render a list:

v-for Example

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'tutorialpro' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

v-for also supports an optional second parameter, which is the index of the current item:

v-for Example

index is the index value of the list item:

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} - {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'tutorialpro' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Using v-for in a <template>:

v-for

<ul>
  <template v-for="site in sites">
    <li>{{ site.text }}</li>
    <li>--------------</li>
  </template>
</ul>

v-for Iterating Over Objects

v-for can iterate over an object's properties:

v-for

<div id="app">
  <ul>
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
</div>
<script>
const app = {
  data() {
    return {
      object: {
        name: 'tutorialpro.org',
        url: 'http://www.tutorialpro.org',
        slogan: 'Learning is not only about technology, but also about dreams!'
      }
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

You can also provide a second parameter for the key:

v-for

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
      {{ key }} : {{ value }}
    </li>
  </ul>
</div>

A third parameter for the index:

v-for

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
      {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

v-for Iterating Over Integers

v-for can also loop through integers:

v-for

<div id="app">
  <ul>
    <li v-for="n in 10">
      {{ n }}
    </li>
  </ul>
</div>

Displaying Filtered/Sorted Results

We can display processed elements of an array, typically by creating a computed property that returns a filtered or sorted array.

v-for Example

Output even numbers from an array:

<div id="app">
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
</div>

Combining v-for with v-if

The following example combines v-for with v-if to set a default value for a select element:

v-for/v-if Example

Loop through a list with v-for and set the selected value with v-if:

<div id="app">
  &lt;select @change="changeVal($event)" v-model="selOption">
    <template v-for="(site, index) in sites" :site="site" :index="index" :key="site.id">
      <!-- Set index 1 as the default value, index starts from 0 -->
      &lt;option v-if="index == 1" :value="site.name" selected>{{ site.name }}</option>
      &lt;option v-else :value="site.name">{{ site.name }}</option>
    </template>
  </select>
  <div>You selected: {{ selOption }}</div>
</div>
<script>
const app = {
  data() {
    return {
      selOption: "tutorialpro",
      sites: [
        { id: 1, name: "Google" },
        { id: 2, name: "tutorialpro" },
        { id: 3, name: "Taobao" }
      ]
    }
  },
  methods: {
    changeVal: function(event) {
      this.selOption = event.target.value;
      alert("You selected " + this.selOption);
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Using v-for on Components

If you are not familiar with components, you can skip this part.

On custom components, you can use v-for just like on any ordinary element:

<my-component v-for="item in items" :key="item.id"></my-component>

However, no data is automatically passed into the component because the component has its own scope. To pass iterated data into the component, use props:

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

Not automatically injecting item into the component is to avoid tight coupling with v-for. Explicitly specifying the source of the component's data allows the component to be reused in other contexts.

Here is a complete example of a simple todo list:

Example

<div id="todo-list-example">
  &lt;form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>