$(document) event handling in vue 2 component-CodePudding

I have some vue 2 component:

<template>
    <section class="component" v-if="load">
        ...
    </section>
    <div class="loader" v-else>
        ...
    </div>
</template>

<script>
export default {
    name: "myApp",
    data() {
        return {
            load: false,
        }
    },
    mounted() {
        this.initApp();
    },
    methods: {
        initApp() {
            this.load = true;
        }
    }
}
</script>

and I init it like this (little use of jquery)

if ($('#container').length > 0) {
    new Vue({
        components: {
            myApp
        },
        render: (h) => {
            return h(myApp);
        },
    }).$mount('#container');
}

Also I have global document's custom event in other non-vue code, triggered by jquery:

$(document).trigger('someEvent');

How can I handle this document's someEvent in myApp component to fully reload it? (This event requires full updating of content and data in myApp.)

CodePudding user response：

have u tried on mounted hook

mounted(){
document.addEventListener("someEvent", ()=>{

//your code after listening to the event 

}); 
}