0
私はLaravel 5.4、Laravel Mix、VueJS、Materialize-cssのウェブサイトを構築しようとしています。Materialize-css + Laravel + VueJS - モーダル、サイドナビゲーションなどを初期化する場所
VueJSとjQueryはLaravelに同梱されているので、何もしません。作成されたコンポーネントはすべて動作するはずです。
websiteの指示に従ってnpm経由でMaterialize-cssをインストールしました。
しかし、私はボタンクリックで飛ぶ必要があるsidenavを実装しようとするとエラーになります。他の素材（トースト、折りたたみなど）はうまく動作します。ここで
はjQueryのをロードし、私のbootstrap.js、マテリアライズ・CSSなどである：
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('materialize-css');
import 'materialize-css/js/materialize.js';
import 'materialize-css/bin/materialize.js';
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
そして、これは私が私の管理者、地域のために必要なすべてのものが含まれている、私のadminarea.jsです：
require('./bootstrap');
Vue.component('example', require('./Vue/components/Example.vue'));
Vue.component('admindashboard', require('./Vue/components/Admindashboard.vue'));
Vue.component('test', require('./Vue/components/Test.vue'));
Vue.component('adminnav', require('./Vue/components/Adminnav.vue'));
const app = new Vue({
el: '#app',
data: {
title: 'Admindashboard'
},
methods: {},
mounted() {
console.log('Da bin ich!');
Materialize.toast('I am a toast!', 4000);
}
});
マイAdminnav成分：
<template>
<div>
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background">
<img src="">
</div>
<a href="#!user"><img class="circle" src=""></a>
<a href="#!name"><span class="white-text name">John Doe</span></a>
<a href="#!email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-activates="slide-out" class="btn" v-on:click="openSidenav">Sidenav</a>
</div>
</template>
<script>
export default {
mounted() {
console.log('Mainnav mounted');
},
methods: {
openSidenav(){
$('.button-collapse').sideNav('show');
}
}
}
</script>
とHTMLファイル：
<body>
<div id="app">
<adminnav></adminnav>
@yield('content')
</div>
<script src="{{ asset('assets/js/adminarea.js') }}"></script>
</body>
jQuery自体も動作します。 materilizecssコンポーネントをどこで初期化するかはわかりません。何か案は？
ありがとうございます！