Vue js with Bootstrap,navbar menu不工作

cgvd09ve  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(135)

我在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上加载代码
你能检查一下然后告诉我怎么了吗?拜托

pgx2nnw8

pgx2nnw81#

你需要使用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>

相关问题