Vue js - :v-for loop is not iterating through array to create list items

Question

I am struggling to get my v-for loop to create a list based on the size of an array. I thought it was straight forward but am having a hard time figuring out where I've gone wrong. I can only seem to get it to produce the first list item. Any ideas? When I inspect in dev tools I see the following:

.vue:

<template>
    <ul>
        <li :v-for="item in items">item
        </li>
    </ul>
   
</template>

<script>

export default {

    data(){
        return{
            items: [
                {name: 'item1'},
                {name: 'item2'},
                {name: 'item3'},
                {name: 'item4'},
            ]
        }
    }
}

</script>

Boussadjra Brahim · Accepted Answer · 2022-02-10 22:51:58Z

2

The v-for is a directive and it's automatically bound to the expression without using the binding sign :, also you should wrap the item with {{}} in order to be rendered:

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

edited Feb 10, 2022 at 22:51

answered Feb 10, 2022 at 22:22

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mellows Over a year ago

As soon as I remove the colon I get a red squig under the whole line and I get the following error: 'Elements in iteration expect to have 'v-bind:key' directives.'. Tried with {{item.name}} as well. The way I posted in my question is the only way I can get it to compile, but it still doesn't work properly.

Boussadjra Brahim Over a year ago

add the key prop like <li v-for="item in items" :key="item.name">{{item.name}}</li>

Rohìt Jíndal · Accepted Answer · 2022-02-11 06:39:31Z

1

One observation : The colon (:) is a shorthand for v-bind. Meaning, you are binding a property to the element. But in our case we are going to iterate the array instead of binding any data.

Working Demo :

var vm = new Vue({
  el:"#app",
  data:{
    items: [
      {name: 'item1'},
      {name: 'item2'},
      {name: 'item3'},
      {name: 'item4'},
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <ul>
      <li v-for="item in items" :key="item.name">
        {{ item.name }}
      </li>
    </ul>
</div>

answered Feb 11, 2022 at 6:39

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

2 Comments

mellows Over a year ago

Thank you. Why do I need this :key="item.name" ? The tutorials I've been watching (I'm new to Vue) never mentioned using this.

Rohìt Jíndal Over a year ago

As per the vue.js Doc - The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list. Please do upvote and accept this answer if it helps you.

Collectives™ on Stack Overflow

Vue js - :v-for loop is not iterating through array to create list items

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related