Vue.js 如何触发$（'；.按钮折叠'；）.sideNav（'；隐藏'；）；在vuejs 2中没有jQuery？

我已成功添加以下代码，该代码为我提供materialise的sideNav：

<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link>
<v-side-nav id="side-nav" class="hide-on-small">
  <a v-on:click="handleNavDashboard()">Dashboard</a>
  <a v-on:click="handleLogout()">Logout</a>
</v-side-nav>

因此，当我在主页上单击Dashboard时，我会在屏幕上看到Dashboard的内容，但是sideNav菜单和变暗的背景仍然存在。Materialise css表示您可以使用此功能

$('.button-collapse').sideNav('hide');

---

以编程方式隐藏它，但我没有安装jQuery。如何在导航单击后重置sideNav？

如果要将

jQuery

包含到使用

requires

或

imports

的项目中，则需要确保它是

required

而不是使用

script

标记包含，因为它将超出编译代码的范围（除非已填隙），因此请将以下内容添加到项目中：

ES6语法：

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery

window.$ = window.jQuery = require('jquery');

ES5语法：

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery

window.$ = window.jQuery = require('jquery');

并确保已安装jQuery：

npm install jquery --save-dev

这将

jQuery

置于全局范围内，因此它可以在站点范围内使用。该软件包的文档并没有真正明确说明这一点，出于某种原因，他们没有提到

jQuery

是一个依赖项，但从代码的角度看，它显然适用于某些组件。

CDN

从物化文档：

最后要注意的一点是，您必须在 正在导入materialize.js

并使用webpack使jQuery全局模块在您的所有文件中可用
这是文件的样本

在Vue.js中，DOM操作封装在指令中，您可以使用条件呈现指令

v-if

或

v-show

来实现这一点，而无需使用jquery：

---

---

还要检查提供干净、语义和可重用组件的组件框架。

如果您不想使用JQuery和Materialize，可以使用指令

：v-show=“showade”

或

：v-If=“showade”

，使用类似

showade

（在数据中）的属性，然后单击处理该值

---

有一个非常快速且便宜的例子：

看来materialize css依赖于jqueryYou可能会发现

Vue

版本很有用：@craig_h我正在使用这个版本。我也在尝试其他答案让jQuery在我的应用程序中工作，但也没有运气。@khany你在使用

npm

，看起来你需要o加载<代码> jQuery NPM < /代码>。我如何制作jQuery Global？@ T-DOM93.天才！从来没有想过要写我自己的边Nav，但现在我有。它是粗糙的，但是做的工作。谢谢你的灵感。很高兴能帮助你！如果有帮助的话，请考虑接受答案。谢谢你，谢谢

npm install jquery

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})