'Link with anchor in a b-dropdown-item with Nuxt / Vue.js

I can't create links with anchors with b-dropdown-item in a b-nav-item-dropdown.

<b-nav-item-dropdown text="Le magasin de Saint Didier" toggle-class="nav-link-dropdown" right>
  <b-dropdown-item to="/magasin-saint-didier">Le magasin</b-dropdown-item>
  <b-dropdown-item to="/magasin-saint-didier#les-horaires">Les horaires</b-dropdown-item>
  <b-dropdown-item to="/magasin-saint-didier#le-salon-de-the">Le salon de thé</b-dropdown-item>
</b-nav-item-dropdown>

It doesn't work.

vue.jsnuxt.jsvue-routerbootstrap-vue


Solution 1:[1]

As shown in the documentation, you can pass an object to the to prop.

Try using it as

<b-dropdown-item :to="{ name: 'magasin-saint-didier', hash: '#les-horaires', replace: true }">Les horaires</b-dropdown-item>

Using replace will assure that the whole thing works even if you're already on the same path.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu

Related Questions