v-for vue wierd behaviour

Question

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
    
        <v-btn @click="func"  ></v-btn>
    </v-app-bar>
    <v-main>
      <router-view/>
            <ul id="example-2">
            <li :v-for="item in items">
            {{ item.message }}
            </li>
        </ul>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class App extends Vue {
    links = ['/', '/login'];
    items = [
        { message: 'Foo' },
        { message: 'Bar' }
    ]
    value = 'text';
    func() {
        console.log(this.value)
    }
}
</script>

I am trying to use v-for at any part of code on any component but it always give me an error on single item.

Answer 1

The correct syntax is v-for without the :

: Is a shorthand for Vue v-bind directive

Quote from the Vue docs:

The v-bind directive is a Vuejs directive used to bind one or more 
attributes, or a component prop to an element. If that attribute is binded 
to our data defined in Vuejs instance then dynamically changes can be 
observed as data changes.