I have created a new Vue instance and assigned it to the window object, thinking that it would be accessible throughout all components. I expected this setup to allow me access to events emitted anywhere within my application.
However, it seems like this is not working as intended. Can someone provide some guidance?
app.js
window.Vue = require('vue');
window.events = new Vue();
window.app = new Vue({
el: '#app',
methods: {
emit: function (name, params) {
window.events.$emit(name, params);
}
}
});
In an attempt to use the emit method within my components, I added it to my app. Trying to directly call
v-on:change="window.events.$emit('makeChanged', $event)"window is not defined.
To listen for emitted events from the emit method within my component, I wrote the following:
window.events.$on('makeChanged', function(evt) {});
Edit:
I'm still struggling to make this work...
app.js
Vue.component('models-select', require('./components/results-text/ModelsSelect.vue'));
window.app = new Vue({
el: '#app',
methods: {
emit(name, ...params) {
this.$root.$emit(name, ...params);
},
...
ModelsSelect.vue
export default {
props: [ 'endpoint', 'makeId', 'modelId', 'typeId'],
mounted() {
this.$root.$on('make-changed', function(evt) {
console.log(evt);
});
Within one of my views (add.blade.php)
<select name="make" id="makes" v-on:change="emit('make-changed', $event)" tabindex="2" class="{{ old('make') ? ' is-changed' : '' }}">