单击导航栏上的按钮时，bootstrap-vue导航栏不会在移动中折叠

Question

我已经使用bootstrap-vue在我的vue.js应用程序上实现了导航栏。单击元素时，导航栏将按预期折叠。我用navitem替换了其中的一个navitem，这样我就可以使其脱颖而出，并为其提供自己的CSS，但是单击该按钮时，导航正常，但菜单保持折叠状态。有没有办法迫使它崩溃？

<template>
  <b-navbar toggleable="lg" type="light">
    <b-navbar-brand to="/"> <img src="static/img/logo.svg" width="220px"></b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="/about-us">About Us</b-nav-item>
        <b-nav-item to="/landlords">Landlords</b-nav-item>
        <b-nav-item to="#">Tenants</b-nav-item>
        <b-button class=" " to="/search">Valuation</b-button>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

Answer 1

设计原生b-nav-item

最简单的解决方案是坚持使用b-nav-item并使用class属性将类应用于项目，将类添加到li或{{1 }}属性，将其添加到呈现的link-classes标签中。

通过这种方式，您可以让Bootstrap-Vue紧密处理崩溃，以防将来发生任何变化。

a

new Vue({
  el: '#app'
})

手动关闭崩溃

另一种选择是通过向导航栏中的自定义元素添加点击处理程序来关闭折叠，如果打开则关闭折叠。

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-navbar toggleable="lg" type="light">
    <b-navbar-brand to="#">
      LOGO
    </b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="#">About Us</b-nav-item>
        <b-nav-item to="#">Landlords</b-nav-item>
        <b-nav-item to="#">Tenants</b-nav-item>
        <b-nav-item to="#" link-classes="btn btn-primary text-white">
          Valuation
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      isCollapseOpen: false
    }
  },
  methods: {
    closeNavCollapse() {
      if(this.isCollapseOpen) {
        this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
      }
    }
  }
})

使用观察者自动检测路线更改。

或者，您可以使用watcher来检测路线何时更改并手动关闭折叠。