Vue v-for Tutorial

Feb 7, 2020

The v-for directive is the right way to do list rendering in Vue. If your Vue instance has an array in data, you can render each element in the array using v-for:

const app = new Vue({
  data: () => ({ people: ['Axl Rose', 'Slash', 'Izzy Stradlin'] }),
  // 1 `<li>` for each person in `people`
  template: `
    <div>
      <h1>Band Members</h1>
      <ul>
        <li v-for="person in people">
          {{person}}
        </li>
      </ul>
    </div>
  `
});

Vue also handles array change detection. If you were to remove an element from the array using splice(), Vue would remove an <li> from the DOM for you.

// Remove "Izzy Stradlin" from the array, and also from the `<ul>`
this.array.splice(2, 1);

With v-model

Although you can loop over an array of strings using v-for, it won't work with v-model. The v-model directive won't be able to update your array with any changes to the <input>.

  const app = new Vue({
    data: () => ({ people: ['Axl Rose', 'Slash', 'Izzy Stradlin'] }),
    // 1 `<input>` for each person in `people`
    template: `
      <div>
        <h1>Band Members</h1>
        <div id="people-array">{{people}}</div>
        <ul>
          <li v-for="person in people">
            <input v-model="person">
            <span>{{person}}</span>
          </li>
        </ul>
      </div>
    `
  });
Even though the `input` is updated, the array doesn't change!

The way to work around this is to use an array of objects with v-for. Whenever you use v-model with v-for, make sure the property you're binding with v-model is an object property.

  const app = new Vue({
    data: () => ({
      people: [
        { name: 'Axl Rose' },
        { name: 'Slash' },
        { name: 'Izzy Stradlin' }
      ]
    }),
    template: `
      <div>
        <h1>Band Members</h1>
        <div id="people-array">{{people}}</div>
        <ul>
          <li v-for="person in people">
            <input v-model="person.name">
            <span>{{person.name}}</span>
          </li>
        </ul>
      </div>
    `
  });

With Objects

You can also use v-for to loop over the keys of an object using the v-for="(value, key) in obj" syntax. Note that v-for only loops over own properties.

const app = new Vue({
  data: () => ({
    people: {
      singer: 'Axl Rose',
      guitarist: 'Slash',
      bassist: 'Duff McKagan'
    }
  }),
  // 3 `<li>` elements: "Axl Rose - singer", "Slash - guitarist",
  // and "Duff McKagan - bassist"
  template: `
    <div>
      <h1>Band Members</h1>
      <ul>
        <li v-for="(value, key) in people">
          {{value}} - {{key}}
        </li>
      </ul>
    </div>
  `
});

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!