I'm confused as to what I've missed in my code, when I try and use it, DevTools console says "Property or method "item" is not defined on the instance but referenced during render". Please could someone tell me what I've forgotten here, thanks!

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" class='lx-navbar'>
      <b-navbar-brand href="#">
        <img src='../assets/images/navbar.png' alt="Logo" height='35px;'>
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto">

            <b-nav-item :v-for="item in items" :key="item.id" :to='item.to'>{{ item.name }}</b-nav-item>

        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        items: [
          { id: 1, name: 'Home', to: '/' },
          { id: 2, name: 'GitHub', to: '/GitHub' },
          { id: 3, name: 'Socials', to: '/Socials' },
          { id: 4, name: 'Nova', to: '/Nova' }
        ]
      }
    }
  }
</script>

<style>
.lx-navbar {
  background: rgb(35, 45, 61);
}
</style>

CodePudding user response：

You shouldn't binding v-for

:v-for is wrong