Materialise-css + Laravel + VueJS - 在哪裏初始化模態，side-nav等

我試圖用Laravel 5.4，Laravel Mix，VueJS和Materialise-css來構建一個網站。Materialise-css + Laravel + VueJS - 在哪裏初始化模態，side-nav等

VueJS和jQuery隨Laravel一起發貨，所以在那裏沒有什麼可做的。所有創建的組件都應該能夠正常工作。

我通過npm按照website上的說明安裝了Materialise-css。

但是現在當我嘗試實現一個應該在按鈕單擊時飛入的sidenav時出現錯誤。其他materilizecss組件（如吐司，摺疊）工作正常。

這裏是我的bootstrap.js它加載了jQuery，Materialise的，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組件。有任何想法嗎？

謝謝！

來源

2017-03-02 Brotzka

看看https://vuematerial.github.io/#/getting-started 你有很多很容易使用的自定義組件。如果你要堅持你實現你有2個選項

import Materialize from 'materialize-css/js/materialize.js'; 
const app = new Vue({ 
el: '#app', 
data: { 
    title: 'Admindashboard' 
}, 
methods: {}, 
mounted() { 
    console.log('Da bin ich!'); 
    Materialize.toast('I am a toast!', 4000); 
} 
});

或

進口從 '兌現，CSS/JS/materialize.js' 物化; window.Materialize =物化;

我建議不要將Vue設置爲窗口，因爲不需要這樣做。和axios一樣。您可以將axios綁定到vue實例。 Vue.prototype.$http = axios。之後您可以通過this.$http.get....撥打電話。還堅持只進口而不是結合需求和進口。

來源

2017-03-02 12:45:10

我已經找到了解決辦法：

代替require('materialize-css')在adminarea.js（通常app.js在一個新的Laravel安裝），我不得不require('materialize-css/dist/js/materialze.js')和require('materialize-css/js/init.js')。

現在一切正常。

來源

2017-03-02 20:56:41 Brotzka

Materialise-css + Laravel + VueJS - 在哪裏初始化模態，side-nav等

回答

相關問題