Question

我正在尝试使用Buefy组件在nuxt上使用导航栏。我实际上有在该导航栏中使用的下拉组件，并且有问题。这是我在nuxt中的导航栏组件

<b-navbar-item class="has-dropdown is-hoverable">
    <b-dropdown hoverable aria-role="list">
        <a slot="trigger" class="navbar-item" role="button">
        <span>Academics</span>
        <b-icon icon="menu-down" />
        </a>
        <template v-for="(each, index) in academicsArray">
        <b-dropdown-item :key="index" aria-role="listitem" tag="nuxt-link" :to="each.link">
            {{ each.text }}
        </b-dropdown-item>
        </template>
    </b-dropdown>
</b-navbar-item>

必需数组

academicsArray: [
    { link: '/academics/pre-primary', text: 'Pre Primary' },
    { link: '/academics/1', text: 'Class 1' },
    { link: '/academics/2', text: 'Class 2' },
    { link: '/academics/3', text: 'Class 3' },
    { link: '/academics/4', text: 'Class 4' },
    { link: '/academics/5', text: 'Class 5' },
    { link: '/academics/6', text: 'Class 6' },
    { link: '/academics/7', text: 'Class 7' },
    { link: '/academics/8', text: 'Class 8' },
    { link: '/academics/9', text: 'Class 9' }
]

在布局目录中，我有一个名为website-navbar

的Landing.vue文件。

现在，当我在页面中使用此着陆布局并且单击下拉项时，它不会将我引导至该链接。另外localhost：3000 / academics / 1正常工作，因此我已经正确配置了路由器，但是下拉菜单项无法将我引向该链接

Answer 1

您应该在has-link中使用b-dropdown-item。在此处查看文档：{{3}}

Answer 2

我使用这里的示例https://buefy.org/documentation/navbar

使它起作用

<b-navbar-dropdown label="Academics" class="is-hoverable">
  <template v-for="(each, index) in academicsArray">
    <b-navbar-item :key="index" :href="each.link">
      {{ each.text }}
    </b-navbar-item>
  </template>
</b-navbar-dropdown>

导航栏下拉列表未指向给定的链接

2 个答案: