$（ '。button-collapse'）をトリガーする方法。sideNav（ 'hide'）; jQueryを使わないでvuejs 2で？

は、私は正常にマテリアライズから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メニューと背景が暗くなっています。マテリアライズ-CSSあなたはprogmaticallyそれを隠すために

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

この機能を使用することができますが、私はjQueryのがインストールされていないと言います。ナビクリック後にsideNavをリセットする方法は？

出典

2017-01-04 khany

マテリアライズ-CSSはjqueryの – Nora

に依存のようにあなたが便利 'Vue'バージョンを見つけることができそうです。http://johnleider.com/vue-materials-docs/ –

@craig_h私が使っているのはそのバージョンです。私はまた、私のアプリで動作してjQueryを得るために他の答えを試していますが、そこにも運がありません。 – khany

CDN

：

最後に一つ注意すべきは、あなたがインポートmaterialize.js前にjQueryをインポートする必要があるということです！

<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" 
})

In Vue。JS DOM操作がディレクティブ内に封入されている、あなたはjqueryのを使用せずに、この仕事をするために、条件付きのレンダリングディレクティブv-ifまたはv-showを使用することができます。

jsFiddle example

また、きれいなセマンティックと再利用可能なコンポーネントを提供コンポーネントフレームワーク Vuetify.jsを確認してください。

出典

2017-01-04 13:26:47

@ t-dom93天才！自分のサイドナビゲーターを書くことは決して考えていませんでしたが、今は持っています。それは原油ですが、仕事をしています。インスピレーションをありがとう。 – khany

あなたを助けてうれしい！それがあなたにとって有益だったら、答えを受け入れることを考慮してください。ありがとう –

あなたがrequiresやimportsを使用しているプロジェクトにしてjQueryを含めたい場合は、コンパイルされたコード（それがない限りの範囲外となりますので、あなたは、それがrequiredなくscriptタグを使用して含まれますことを確認する必要があります）シムので、あなたのプロジェクトに以下を追加しました：

ES6構文：

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

ES5構文：

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

そして、あなたはjQueryをインストールしていることを確認してください：それは、サイトの広いを使用することができますので、これはグローバルスコープにjQueryを置く

npm install jquery --save-dev

を。そのパッケージのドキュメントは実際にはっきりとしていないし、何らかの理由でjQueryが依存しているとは言いませんが、コードを見れば明らかにいくつかのコンポーネントがあります。マテリアライズドキュメントから

出典

2017-01-04 12:55:56

あなたはjQueryとマテリアライズを使用したくない場合は、（データで）showAsideのようにプロパティをディレクティブ:v-show="showAside"または:v-if="showAside"を使用し、クリックで値を扱うことができます。

非常に迅速かつ安価な例があります：https://jsfiddle.net/nosferatu79/p85rw6xz/

出典

2017-01-04 14:04:15

$（ '。button-collapse'）をトリガーする方法。sideNav（ 'hide'）; jQueryを使わないでvuejs 2で？

答えて

関連する問題