Laravel bootstrap-vue 不适用于导航崩溃
Posted
技术标签:
【中文标题】Laravel bootstrap-vue 不适用于导航崩溃【英文标题】：Laravel bootstrap-vue not working with nav collapse 【发布时间】：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Ψ 我也是这么想的，但是把它移到里面还是不行。
【参考方案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。
【讨论】：
以上是关于Laravel bootstrap-vue 不适用于导航崩溃的主要内容，如果未能解决你的问题，请参考以下文章
使用 Laravel 分页和 Bootstrap-vue 分页
Laravel bootstrap-vue 不适用于导航崩溃
无法读取未定义的属性“扩展”。 laravel bootstrap-vue中的安装问题
单击laravel vuejs中的按钮后如何隐藏bootstrap-vue模式