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

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>

CodePudding user response：

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>

CodePudding user response：

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>