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.)
have u tried on mounted hook
mounted(){
document.addEventListener("someEvent", ()=>{
//your code after listening to the event
});
}