Materialize-css+Laravel+VueJS - 在哪里初始化模态、侧边导航等

Question

我正在尝试使用 Laravel 5.4、Laravel Mix、VueJS 和 Materialize-css.

构建网站

VueJS 和 jQuery 与 Laravel 一起发布，因此无事可做。所有创建的组件都可以正常工作。

我按照 website.

上的说明通过 npm 安装了 Materialize-css

但是现在当我尝试实现应该在单击按钮时飞入的 sidenav 时出现错误。其他 materilizecss-组件（如 Toasts、Collapsibles）工作正常。

这是我的 bootstrap.js，它加载 jQuery、Materialize-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">jdandturk@gmail.com</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-components。有什么想法吗？

谢谢！

Answer 1

看看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);
 }
});

或

从 'materialize-css/js/materialize.js' 导入 Materialise； window.Materialize = 实体化；

我建议不要将 Vue 设置为 window 因为没有必要这样做。与 axios 相同。您可以改为将 axios 绑定到 vue 实例。 Vue.prototype.$http = axios。之后您可以通过 this.$http.get.... 拨打电话。也坚持只进口而不是结合要求和进口。

Answer 2

我找到了解决方案：

而不是 adminarea.js 中的 require('materialize-css')（通常 app.js 在新的 Laravel 安装中）我不得不 require('materialize-css/dist/js/materialze.js') 和 require('materialize-css/js/init.js')。

现在一切正常。

Materialize-css+Laravel+VueJS - 在哪里初始化模态、侧边导航等

Materialize-css+Laravel+VueJS - where to initialize modals, side-nav etc

materialize

npm

laravel

vuejs2