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

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

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

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> 

有什么想法吗?谢谢!

请您参考如下方法:

看来我找到了解决办法:

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),这也有效。

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


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!