Question

我试图在VueJS实例中触发materializecss框架中的模态。

${filename:toDate("'file_'yyyy-MM-dd'T'HHmmss'.csv'", "UTC"):toNumber()}和VueJS都是正确的。他们自己的两个框架都运行良好。

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

未捕获TypeError：data [option]不是函数在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-Instance：

Materializecss

这是我的html文件中具有模态结构的部分：

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

有什么想法吗？谢谢！

Answer 1

根据建议here，您需要在已安装的块中添加以下代码：

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

Answer 2

我似乎找到了解决方案：

很高兴知道Laravel用户：对于我目前的项目，我使用Laravel 5.5和Materialisecss，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-instance的挂载事件上初始化模态函数：

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）可见，则此方法也有效。

希望这可以帮助除了我以外的人：）

VueJS - 从materializecss触发模态

2 个答案: