vue.js - 导航栏下拉列表未指向给定的链接(Navbar dropdown is not leading to the given link)

Question

I am trying to make a navbar work on nuxt with Buefy components.

(我正在尝试使用Buefy组件在nuxt上进行导航。)

I actually have dropdown component that I use in this navbar and having problem with.

(我实际上有在该导航栏中使用的下拉组件，并且有问题。)

This is my navbar component in 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>

required array

(所需数组)

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' }
]

In layout directory, I have landing.vue file where i called website-navbar

(在布局目录中，我有一个landing.vue文件，其中我将其称为website-navbar)

Now when i use this landing layout in pages, and i click on dropdown item, it doesn't lead me to that link.

(现在，当我在页面中使用此着陆布局并且单击下拉项时，它不会将我引向该链接。)

Also localhost:3000/academics/1 is working, so i have configured my router correctly, but dropdown item isn't leading me to that link

(另外localhost：3000 / academics / 1正常工作，因此我已经正确配置了路由器，但是下拉菜单项无法将我引导至该链接)

  ask by f1uk3r translate from so

Answer 1

You should use has-link in the b-dropdown-item .

(您应该在b-dropdown-item使用has-link 。)

See the doc here: https://buefy.org/documentation/dropdown#links-within

(在此处查看文档： https ： //buefy.org/documentation/dropdown#links-within)