vue.js - 带 Bootstrap 的 Vue js，导航栏菜单不起作用

Question

我在 Vue js 上实现了一个导航栏菜单，它是响应式的，它非常适合桌面，但是当我测试响应式模式时，菜单不起作用，这是按钮切换:

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#sidebarMenu"
          aria-controls="sidebarMenu"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="fas fa-bars"></i>
        </button>

在我的侧边栏上有:

<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">

你可以看到引用sidebarMenu所以，我不知道出了什么问题？我将我的代码加载到 CodesandBox.io

你可以检查一下并告诉我出了什么问题吗？请

Answer 1

你需要使用 vue 指令而不是 data-toggle 和 data-target ...这是在 vue 中应该如何完成的:

<template>
<div>
    <!-- Button to toggle the sidebar -->
    <button
    class="navbar-toggler"
    type="button"
    @click="toggleSidebar"
    >
    <i class="fas fa-bars"></i>
    </button>

    <!-- Sidebar -->
    <nav
    id="sidebarMenu"
    :class="{ 'collapse': !sidebarOpen, 'd-lg-block': sidebarOpen, 'bg-white': sidebarOpen }"
    >
    <!-- Sidebar content -->
    </nav>
</div>
</template>

<script>
export default {
data() {
    return {
    sidebarOpen: true, // Initial state, you can set it to false if you want it closed by default
    };
},
methods: {
    toggleSidebar() {
    // Toggle the sidebarOpen state
    this.sidebarOpen = !this.sidebarOpen;
    },
},
};
</script>