VueJS - 从 materializecss 触发 Modal

Question

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

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

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

Uncaught TypeError: data[option] is not a function 在 HTMLDivElement。 (adminarea.js:24562) 在 Function.each (adminarea.js:10567) 在 jQuery.fn.init.each (adminarea.js:10356) 在 jQuery.fn.init.Plugin [作为模式] (adminarea.js:24556) 在 Vue$3.showLoader (adminarea.js:21396) 在 boundFn (adminarea.js:54956) 在 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 用户知道：对于我当前的项目，我使用带有 Materializecss、VueJS 和 VueRouter 的 Laravel 5.5，但我认为该解决方案是通用的。 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），这也有效。

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

Answer 2

按照here的建议，您需要在mounted块中添加以下代码：

mounted() {
    $('#loaderModal').modal();  //New line to be added
    // Get current User
    axios.get('/api/currentUser')
        .then(response => {
            this.activeUser.username = response.data.username;
            this.activeUser.email = response.data.email;
        });
},