0

我正在尝试使用 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' }
]

在布局目录中，我有我调用的landing.vue 文件website-navbar

现在，当我在页面中使用此着陆布局并单击下拉项时，它不会将我引导至该链接。localhost:3000/academics/1 也在工作，所以我已经正确配置了我的路由器，但是下拉项并没有引导我到那个链接

4

2 回答 2

0

你应该has-link在b-dropdown-item. 请参阅此处的文档：  https ://buefy.org/documentation/dropdown#links-within

于 2019-11-26T15:57:39.370 回答
0

我使用此处使用的示例使其工作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>
于 2019-12-01T09:12:49.467 回答