Using BootstrapVue - modal off of nav bar, link not working

Hi,

I’m using BootstrapVue with vue.js (obviously) and I have a search result popup (basically a div with a different z-index) which pops up when someone uses a component that is actually inside of the BootstrapVue nav bar.

I have a hyperlink for the search result to click to go directly to the item, but the link is doing nothing when I click on it. If I “remove” the event listener, in Chrome dev tools, for a.nav-link for that anchor, the link works.

I’m not adding the .nav-link class, and I don’t want it. How can I prevent it from getting added?

I’ve also tried <b-nav-link :href="mylink"> and it also does nothing. The href is getting overridden for some reason.

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

Thanks. Here is the code for the component itself:

<template>
    <div class="result-item">
        <a :href="url">
        <div>
            <span>{{ title }}</span><br>
        </div>
        </a>
        <div class="clearfix"></div>
    </div>
</template>

The SearchResults component is a search box that is in the nav bar, on every page. And here is the usage of that component within the navbar on the page:

<b-navbar v-cloak toggleable="sm" type="dark" id="pageapp">
    <b-navbar-brand href="#">
        <img alt="logo" src="images/logo.png" id="logo"/>
    </b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="mx-auto">
          <b-nav-item>
            <b-nav-form>
                    <Searchresults 
                         @opened="searchOpened"
                         @closeSearch="closeSearch">
                    </Searchresults>
            </b-nav-form>
         </b-nav-item>
       </b-navbar-nav>
    </b-collapse>
</b-navbar>

So unfortunately right now it’s structured so that the results pop-up is encapsulated “within” the b-nav-form, which I don’t prefer but I don’t know why it would be a problem and I’d rather not have to re-work it all right now.

Here’s how that area of the page looks in dev tools:

<div class="result-item" index="0">
  <a href="/inventory/edit/1179">
    <div>
      <span>The first result</span>
    </div>
  </a> 
  <div class="clearfix"></div>
</div>

And here’s what the event listeners look like:

click
   document [Remove] home.js:78
   div#nav-collapse.navbar-collapse.collapse [Remove] vue.esm.js:7542
   a.nav-link [Remove] vue.esm.js:7542

If I remove the a.nav-link listener, the link works. I don’t even want that listener and I never added the class, and I don’t even know what it does. This just seems to be one of those times when a framework’s “magic” is unwanted and implicit, which is frustrating, but I know it’s a trade-off of using a framework.

Any suggestions?

I figured it out. Since this is on a nav bar, I used <b-nav-item> as a “container” for that search textbox, and on page load it is wrapping that in an anchor, which means my whole form was inside an anchor. Obviously a problem, so I reworked it so it doesn’t use <b-nav-item>.