Vue模板中折叠按钮点击后可折叠内容不显示的问题求助

我的Bootstrap导航栏在小屏幕下点击折叠按钮时有切换动作，但可折叠的菜单内容无法显示。代码如下：

<div class="m-4">
  <nav class="navbar navbar-expand-lg position-relative text-right">
    <div class="container-fluid">
      <a class="navbar-brand navbar-logo" href="#">
        <img src="../assets/logo.png" height="100" alt="navbar brand">
      </a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" @click="collapse = !collapse">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse  justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item mr-3">
            <router-link to="/about" class="nav-link">About </router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/solutions" class="nav-link">Solutions</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/careers" class="nav-link">Careers</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/contact" class="nav-link">Contact</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/pricing" class="nav-link">Pricing</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/developers" class="nav-link>Developers</router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

问题分析与修复步骤 #

• 折叠逻辑冲突：按钮同时使用了Bootstrap原生data-bs-toggle="collapse"和Vue的@click="collapse = !collapse"，两者状态切换逻辑互相干扰。Bootstrap JS已内置折叠状态管理，删除@click绑定即可。
• HTML语法错误：最后一个<router-link>的class属性未闭合（class="nav-link缺少结尾双引号），导致DOM解析异常，修复该语法错误。
• 依赖检查：确保已正确引入Bootstrap CSS、JS及依赖的Popper.js（Bootstrap 5+折叠组件需要Popper.js支持）。

修正后的代码 #

<div class="m-4">
  <nav class="navbar navbar-expand-lg position-relative text-right">
    <div class="container-fluid">
      <a class="navbar-brand navbar-logo" href="#">
        <img src="../assets/logo.png" height="100" alt="navbar brand">
      </a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse  justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item mr-3">
            <router-link to="/about" class="nav-link">About </router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/solutions" class="nav-link">Solutions</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/careers" class="nav-link">Careers</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/contact" class="nav-link">Contact</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/pricing" class="nav-link">Pricing</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link to="/developers" class="nav-link">Developers</router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

补充说明 #

若项目尚未引入Bootstrap资源，可添加以下代码到页面头部/尾部：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Popper.js 与 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

内容的提问来源于stack exchange，提问作者Kabau Paatrick