[bootstrap-vue导航栏在单击导航栏上的按钮时不会在移动中崩溃

Question

我已经使用bootstrap-vue在我的vue.js应用中实现了导航栏。单击元素时，导航栏将按预期折叠。我已将navitem之一替换为a，以便使其脱颖而出并提供其自己的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，或使用link-classes道具将其添加到渲染的a标签。

通过这种方式，Bootstrap-Vue可以紧密处理崩溃，以防将来发生变化时提供更多的未来证明。

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

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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')
      }
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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 v-model="isCollapseOpen"  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-button to="#" variant="primary" @click="closeNavCollapse">
          Valuation
        </b-button>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

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

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