Javascript 当用户使用Vue js在侧边栏导航菜单外单击时，如何隐藏侧边栏导航菜单？

我的SPA有一个带有侧栏导航菜单的管理仪表板，默认情况下，当视口大于991px时，侧栏导航菜单可见。当视口小于991px时，导航栏将消失，您可以单击汉堡图标切换（显示/隐藏）侧栏菜单。现在，只有当你再次点击小汉堡菜单图标时，菜单才会隐藏。我想要的是，如果用户单击菜单之外的任何位置，则关闭/隐藏菜单。我正在为我的UI使用引导Vue

所以我有一个

我想做的是这样的事情，但我知道我混合了Javascript和Vue js，不知道如何设置它

data() {
    return {
        sidebarMenu: true
    }
}

此主面板div将包含每个页面的所有数据，因此无论他们在何处单击此

hidesibaranvmenu

函数都应被激发

我只需要在视口小于991px时使用此代码。 同样，我的方法中出现了一些语法错误，我相信这是因为我试图在我的methods属性中编写Javascript

这就是我的想法。

---

谢谢。

问题是

方法必须包含…方法，而不是像
const navbarTogglerButton…
这样的代码。这可能是您的错误

将您的事件附加到
.navbar切换程序



方法：{
hidesibaranvmenu（）{
this.sidebarMenu=false；
},
showSidebarNavMenu（）{
this.sidebarMenu=true；
},
}
我刚刚意识到，在我正在使用的免费管理主题中，当用户单击Hamburger按钮切换侧栏时，它所做的只是在nav元素上添加和删除一个名为active的类。
要素：

问题是div在我的HTML中不存在，因为如上所述，它只是引导Vue的组件，自动生成其中的代码。因此，我不确定如何动态访问内部的div。我明白了，那么您需要添加代码
const-navbarTogglerButton=document.querySelector（“.navbar-toggler”）；安装组件或视图后，navbarTogglerButton.addEventListener（'click'，函数（事件）{this.sidebarMenu=true；}）
。查看以获取更多详细信息。有没有办法仅在视口或窗口小于991px时调用此函数？此外，当我在侧边栏外单击时，侧边栏将消失，但是当我点击导航栏切换图标时，我得到了这个错误：TypeError:无法读取null的属性'classList'，我想这可能是因为我的代码/函数在Admin.vue中，但在AppHeader.vue组件中。我怎样才能解决这个问题？
<section class="app-sidebar" v-if="sidebarMenu">

<div class="main-panel" @click="hideSidebarNavMenu">

methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    const navbarTogglerButton = document.querySelector(".navbar-toggler");

    navbarTogglerButton.addEventListener('click', function(event) {
        this.sidebarMenu = true;
    })
}

<nav id="sidebar" class="sidebar sidebar-offcanvas active">

mounted() {
    var mainPanelDiv = document.querySelector(".main-panel");
    var navbar = document.querySelector("#sidebar");
    mainPanelDiv.addEventListener('click', function(event) {
        navbar.classList.remove('active');
    });
}