0 votes
in VueJS by
What is the purpose of v-for directive in VueJS?

1 Answer

0 votes
by
The built-in v-for directive allows us to loop through items in an array or object. You can iterate on each element in the array or object.

Array usage:

<ul id="list">

  <li v-for="(item, index) in items">

    {{ index }} - {{ item.message }}

  </li>

</ul>

var vm = new Vue({

  el: '#list',

  data: {

    items: [

      { message: 'John' },

      { message: 'Locke' }

    ]

  }

})

You can also use of as the delimiter instead of in, similar to javascript iterators.

Object usage:

<div id="object">

  <div v-for="(value, key, index) of user">

    {{ index }}. {{ key }}: {{ value }}

  </div>

</div>

var vm = new Vue({

  el: '#object',

  data: {

    user: {

      firstName: 'John',

      lastName: 'Locke',

      age: 30

    }

  }

})

Related questions

0 votes
asked Oct 21, 2019 in VueJS by Tate
0 votes
asked Sep 7, 2023 in VueJS by AdilsonLima
...