im currently integrating multiple Vue instances on my website, can't make the entire website a Vue instance and use ponents as there is a conflict possibility and other issues.
So for example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="vueOne"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac modo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>
<script>
new Vue({
el: '#vueOne',
data: {
count: 0
}
});
new Vue({
el: '#vueTwo',
data: {
count: 0
}
});
</script>
</body>
</html>
Is there a way I can fire a custom event in Vanilla JS and have the Vue instances detect this?
im currently integrating multiple Vue instances on my website, can't make the entire website a Vue instance and use ponents as there is a conflict possibility and other issues.
So for example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="vueOne"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac modo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>
<script>
new Vue({
el: '#vueOne',
data: {
count: 0
}
});
new Vue({
el: '#vueTwo',
data: {
count: 0
}
});
</script>
</body>
</html>
Is there a way I can fire a custom event in Vanilla JS and have the Vue instances detect this?
Share Improve this question asked Oct 1, 2018 at 15:57 Martyn BallMartyn Ball 4,8959 gold badges63 silver badges145 bronze badges 1- what's your objective? please explain more – Boussadjra Brahim Commented Oct 1, 2018 at 16:03
2 Answers
Reset to default 6The events setup on your vue elements/ponents are/use the same type of event listeners setup on regular elements. So you can get a reference to the element you have set the event listener on, and call dispatchEvent with your custom event.
For instance if you had an event called my-event setup on one of your divs like
<div id="vueOne" v-on:my-event="myListener">{{count}}</div>
You could use querySelector("#vueOne") to get a reference to that element, and then call dispatchEvent() on it
document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );
Demo
new Vue({
el: '#vueOne',
data: {
count: 0
},
methods:{
myListener:function(){
this.count++;
console.log("listener called");
}
}
});
new Vue({
el: '#vueTwo',
data: {
count: 0
}
});
setTimeout(function(){
document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );
},2000);<script src="https://vuejs/js/vue.min.js"></script>
<div id="vueOne" v-on:my-event="myListener">{{count}}</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac modo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam
ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>I use the same logic.. i create a vue instance for messaging only. This way i can call events from non-vue and use them in vue and backwards..
window.Event = new class {
constructor() {
this.vue = new Vue();
}
fire(event, data = null) {
this.vue.$emit(event, data);
}
listen(event, callback) {
this.vue.$on(event, callback);
}
}
In a ponent i have a event listener:
created () {
Event.listen('notification', function (msg) {
console.log(msg);
});
}
and i can send a message like this:
Event.fire('notification', {
title: 'Hello from notification throug message :)';
});
because the event class is created on the window, it is accessable from every ponent, and every function. This is a easy way for municating between vue instances, vue -> vanilla and vanilla -> vue.
And because it is a vue instance for messages only, the load is very little. You can add as many event listeners as you want.. you can send all kind of messages to different listeners, or create multiple listeners for the same message.