Question

我已经成功添加了以下代码，它为我提供了物化的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>

我使用以下方法：

  methods: {
    handleLogout () {
      console.log('LOGGED OUT')
      this.$store.dispatch('clearAuthUser')
      window.localStorage.removeItem('authUser')
      this.$router.push({name: 'login'})
    },
    handleNavDashboard () {
      console.log('GOING DASHBOARD')
      console.log(this)
      this.$router.push({name: 'dashboard'})
    }
  }

因此，当我在主页上并单击仪表板时，我会在屏幕上显示仪表板内容，但是sideNav菜单和黑暗的背景仍然存在。 Materialise-css表示你可以使用这个功能

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

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

Answer 1

<强> CDN

来自Materialise文档：

最后要注意的是，您必须先导入jQuery 导入materialize.js！

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

<强> NPM

更好的方法是，通过npm安装jQuery：

npm install jquery

并使用webpack ProvidePlugin在所有文件中提供jQuery全局模块这是webpack.config.js文件的样本

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

在Vue.js中，DOM操作被封装在指令中，您可以使用条件呈现指令v-if或v-show来实现这一点，而无需使用jquery：

jsFiddle example

<小时/> 还要检查提供干净，语义和可重用组件的组件框架Vuetify.js。

Answer 2

如果您想将jQuery包含在使用requires或imports的项目中，那么您需要确保它是required而不是使用{script 1}}标签，因为它将超出编译代码的范围（除非它被填充），所以将以下内容添加到您的项目中：

ES6语法：

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

ES5语法：

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

并确保已安装jQuery：

npm install jquery --save-dev

这将jQuery放入全局范围，因此可以在站点范围内使用它。该软件包的文档并没有真正说清楚，并且由于某种原因，他们没有提到jQuery是一个依赖项，但是对于某些组件，它清楚地看代码。

Answer 3

如果您不想使用JQuery和Materialize，您可以将指令:v-show="showAside"或:v-if="showAside"与showAside之类的属性（在数据中）一起使用并处理该值点击一下。

有一个非常快速和便宜的例子：https://jsfiddle.net/nosferatu79/p85rw6xz/

如何触发$（'。button-collapse'）。sideNav（'hide'）;在没有jQuery的vuejs 2中？

3 个答案: