Vue-Bootstrap navbar使用v-for时报item未定义问题求助

你的代码错误点在v-for指令前多写了冒号:。
v-for是Vue原生内置指令，不需要用v-bind（也就是冒号语法）绑定，加了冒号后Vue会把它识别为要动态绑定的普通属性，不会按照循环逻辑处理，自然找不到循环作用域下的item变量，就会抛出你遇到的报错。

修复方法 #

把<b-nav-item>标签上的:v-for修改为v-for即可，修改后的对应代码行如下：

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

完整修复后代码 #

<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>

内容的提问来源于stack exchange，提问作者larkx