Bootstrap Аварийное меню Navabar не закрывает панель после события щелчка ссылки

Question

Я пытаюсь использовать полосу bootstrap в Vue js проекте, созданном с помощью команды "vue create sitoprova". Я импортировал эти библиотеки: зависимости ": {" bootstrap ":" ^ 4.4 .1 "," bootstrap - vue ":" ^ 2.13.0 "," core- js ":" ^ 3.6.4 "," firebase ":" ^ 7.14.2 "," jquery ":" ^ 3.4.1 "," materialize- css ":" ^ 1.0.0-r c .2 "," node-ip c ":" ^ 9.1.1 ",

export default {
  name: "Navbar",
  props: {
    msg: String
  },
  components:{}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @media (min-width: 992px) { 
    
    .navbar.custom-nav{
      padding-top:16px;
      padding-bottom:16px;
      background-color: #fff !important;
    }

   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar custom-nav fixed-top navbar-expand-lg navbar-light bg-light">
     <div class="container">
        <router-link class="navbar-brand" to="/">Vue Shop</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/products" class="nav-link" href="#">Products</router-link>
            </li>

            <li class="nav-item">
              <router-link to="/about" class="nav-link" href="#">About</router-link>
            </li>
          
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <a class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#login">Get Start</a>
            <a class="btn btn-outline-info border-0 mx-2 my-2 my-sm-0" data-toggle="modal" data-target="#miniCart">
              <i class="fas fa-cart-plus"></i>
            </a>
          </form>
        </div>

     </div>

</nav>

"popper.js": "^1.16.1",
"run": "^1.4.0",
"serve": "^11.3.0",
"vue": "^2.6.11",
"vue-fire": "^0.1.0",
"vue-router": "^3.1.6",
"vue-simple-alert": "^1.1.1"

},

Я читал, что удалось jquery идет, но не знаете, как это сделать? Вы можете помочь мне? Большое спасибо?

Answer 1

В итоге я нашел решение вот оно:

  name: "Navbar",
  props: {
    msg: String
  },
  methods : {
    close_navbar () {
  windows.$('.navbar-nav>router-link>').on('click', function(){
  windows.$('.navbar-collapse').collapse('hide');
});
    }


   },
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Все равно спасибо