materialize - VueJS - 从 materializecss 触发模态

Question

我正在尝试从 VueJS 实例中的 materializecss 框架触发模式。

VueJS 和 Materializecss 都已正确实现。这两个框架都可以正常工作。

单击打开按钮会导致错误:

Uncaught TypeError: data[option] is not a function at HTMLDivElement. (adminarea.js:24562) at Function.each (adminarea.js:10567) at jQuery.fn.init.each (adminarea.js:10356) at jQuery.fn.init.Plugin [as modal] (adminarea.js:24556) at Vue$3.showLoader (adminarea.js:21396) at boundFn (adminarea.js:54956) at HTMLButtonElement.invoker (adminarea.js:56467)

这是我的 Vue 实例:

const app = new Vue({
    el: '#app',
    data: {
        activeUser: {
            username: '',
            email: ''
        },
    },
    methods: {
        showLoader(){
            $('#loaderModal').modal('open');
        },
        closeLoader(){
            $('#loaderModal').modal('close');
        }
    },
    mounted() {
        // Get current User
        axios.get('/api/currentUser')
            .then(response => {
                this.activeUser.username = response.data.username;
                this.activeUser.email = response.data.email;
            });
    },
    components: {
        Admindashboard
    }
});

这是我的 html 文件的模态结构部分:

<!-- Modal Structure -->
            <div id="loaderModal" class="modal">
                <div class="modal-content">
                    <h4>Fetching data..</h4>
                    <div class="progress">
                        <div class="indeterminate"></div>
                    </div>
                </div>
            </div>
            <button class="btn cyan waves-effect waves-cyan" v-on:click="showLoader">Open</button>

有什么想法吗？谢谢!

Answer 1

看来我找到了解决办法:

Laravel 用户很高兴知道:对于我当前的项目，我将 Laravel 5.5 与 Materializecss、VueJS 和 VueRouter 一起使用，但我认为该解决方案是通用的。 Materializecss 是通过 npm 安装的，必须包含在您的应用程序中。我在我的 ressources/assets/js/bootstrap.js 中需要 css 框架:

...// more code
try {
    window.$ = window.jQuery = require('jquery');
    window.materialize = require('materialize-css');
} catch (e) {
    console.log(e);
}
...// more code

现在您必须在包装 Vue 实例的挂载事件上初始化模态函数:

const app = new Vue({
    router,
    data: {
        ...
    },
    methods: {
        testClick: function(){
            console.log('Testklick-Call');
            $('#modal1').modal('open');
        }
    },
    mounted: function(){
        console.log('Instance mounted');
        $('.modal').modal();
    }
}).$mount('#app');

上面的代码放在我的 ressources/assets/js/app.js 中，默认情况下由 Laravel Mix 打包但我认为这是通用的，也可以在没有 Laravel Mix/Webpack 等的情况下使用。

现在，您可以随时随地以编程方式调用每个模式。我已经在点击事件的主要实例中对其进行了测试。函数放在我的 Vue 实例中(见上文)。 HTML 代码见下文:

<button v-on:click="testClick">Open Modal</button>

但您也可以在挂载函数或任何组件的任何其他函数中使用模式:

<template>
    <div>
        <p>I am an component!</p>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted!');
            $('#modal1').modal('open');
        }
    }
</script>

如果组件仅在单击链接后才可见(使用 VueRouter)，这也有效。

希望这对我以外的人有帮助:)