如何使用 vue.js 和 bootstrap4 在移动视图中隐藏侧边栏并在移动和其他设备视图中单击切换答案

【问题标题】：How to make sidebar hidden in mobile view and toggle on click in mobile and other device view using vue.js and bootstrap4如何使用 vue.js 和 bootstrap4 在移动视图中隐藏侧边栏并在移动和其他设备视图中单击切换
【发布时间】：2020-07-19 23:36:39
【问题描述】：

我的代码可以在纯 bootstrap4 和 javascript 上正常工作，但是当我尝试在移动视图侧边栏中使用 vuejs 时，下面没有显示我想在 vuejs 中更改的代码，但在 vuejs 中显示的是 toggleClass 不是定义错误

  $("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
 });

Here is the link for template that i am using.

这是错误截图

任何人都可以帮助我如何做以及有什么替代方法？提前致谢

【问题讨论】：

混合使用 jQuery 和 Vue 不是一个好主意
是的，这就是为什么我要问如何在 vuejs 中做到这一点
方法：{ togglemenu(){ this.isActiveMenu = !this.isActiveMenu;我正在使用它，但在移动视图中它会导致侧边栏在加载时打开
声明的时候不能data() { return { isActiveMenu: false }}吗？
是的，但我希望侧边栏对 pc 等大型设备有效

标签： vue.js bootstrap-4 vuejs2 sidebar vuejs3

【解决方案1】：

我得到了解决方案。这是答案

import jquery from 'jquery';
mounted() {
      jquery("#menu-toggle").click(function (e) {
        e.preventDefault();
        jquery("#wrapper").toggleClass("toggled");
      });
}

这对我有用

【讨论】：