VueJs - materializecss에서 모달 트리거

VueJs - materializecss에서 모달 트리거

VueJS 인스턴스 내의 materializecss 프레임워크에서 모드를 트리거하려고 합니다.

둘다요.VueJS그리고.Materializecss는 올바르게 실장되어 있습니다.두 프레임워크 모두 잘 작동합니다.

열기 버튼을 클릭하면 다음과 같은 오류가 발생합니다.

Uncaught TypeError: data [ option ]는 htmldivElement.(adminarea.js:24562)의 함수가 아닙니다(adminarea.fn.init.each(adminarea.js:10356).Vue$3.showLoader(adminarea.js:21396)의 플러그인 [모달로서](adminarea.js:24556)의 HTMLButtonElement(adminarea.js:54956)의 boundFn(adminarea.js:54956)

Vue-Instance는 다음과 같습니다.

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

다음은 modal 구조의 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 유저에게 알려드립니다.현재 프로젝트에서는 Materializecss, VueJs 및 VueRouter와 함께 Laravel 5.5를 사용하고 있습니다만, 이 솔루션은 범용이라고 생각합니다.Materializecss는 npm 경유로 설치되었으며 어플리케이션에 포함되어야 합니다.내 안에 css-framework가 필요해ressources/assets/js/bootstrap.js:

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

이제 래핑된 Vue 인스턴스의 마운트된 이벤트에서 Modal 기능을 초기화해야 합니다.

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-instance에 배치되어 있습니다(위 참조).HTML-Code는 아래를 참조해 주세요.

<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를 사용하여 링크를 클릭한 후에만 컴포넌트가 표시되는 경우에도 이 방법은 작동합니다.

나 말고도 도움이 되었으면 좋겠다:)

여기에 제시된 바와 같이 마운트된 블록에 다음 코드를 추가해야 합니다.

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

언급URL : https://stackoverflow.com/questions/42573472/vuejs-trigger-modal-from-materializecss