Laravel bootstrap-vue 不适用于导航崩溃答案

【问题标题】：Laravel bootstrap-vue not working with nav collapseLaravel bootstrap-vue 不适用于导航崩溃
【发布时间】：2020-08-15 12:59:36
【问题描述】：

我正在尝试让我的可折叠导航栏在 Laravel 7 中与 Vue + Bootstrap 一起使用，但没有运气。导航栏显示没有问题，但是当我调整大小并尝试折叠它时，按钮什么也不做，也不会抛出任何错误。

我已将 bootstrap-vue 导入到我的 app.ts 文件中，它应该已启用，但似乎没有启用。

app.ts

import "./bootstrap";
import Vue from "vue";
import BootstrapVue from "bootstrap-vue"; //Importing

Vue.use(BootstrapVue); // Telling Vue to use this in whole application

// Require everything withing the /components directory as a Vue component
const files = require.context("./", true, /\.vue$/i);
files.keys().map(key =>
    Vue.component(
        key
            .split("/")
            .pop()
            ?.split(".")[0] ?? "",
        files(key).default
    )
);

new Vue({
    el: "#app"
});

导航栏文件（main.blade.php）

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token"
          content="{{ csrf_token() }}">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>nCoV Stats</title>
    <link href="{{ asset('css/app.css') }}"
          rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand"
           href="#">Navbar</a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse"
             id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link"
                       href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled"
                       href="#"
                       tabindex="-1"
                       aria-disabled="true">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Content -->
    <main id="app"
          class="wrapper flex-grow-1">
        @yield('content')
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-8">
                    A Joe Scotto product.
                </div>
                <div class="col-4"></div>
            </div>
        </div>
    </footer>

    <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>

据我了解，这应该可以正常工作，因为我将它导入到 app.ts 中

【问题讨论】：

这个new Vue({ el: "#app" }); 意味着vue 实例只能在带有id=app 的标签上工作，也就是<main> 标签，并且你的导航在那个标签之外
@porloscerrosΨ 我也是这么想的，但是把它移到里面还是不行。

标签： javascript laravel twitter-bootstrap vue.js bootstrap-vue

【解决方案1】：

我认为这是因为您没有在标记中使用任何 Bootstrap-Vue 组件。在您的情况下，导航栏必须看起来像：

<b-navbar toggleable="lg" type="light" variant="light">
    <b-navbar-brand href="#">NavBar</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 href="#">Home</b-nav-item>
        <b-nav-item href="#">Features</b-nav-item>
        <b-nav-item href="#">Pricing</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

你可以找到更多关于导航栏组件的信息here

此外，就像提到的 porloscerros Ψ 一样，您需要在 body 元素上设置 id=app 或使用包含您的 (Bootstrap-Vue) 组件的 id=app 创建一个 div。

【讨论】：