[Vuejs]-EventBus does not remove previous message in vue2.js

by

2👍

✅

The most easy solution to get a global eventbus ( and it seems like you want that ) is to do the following before adding your components.

var EventBus = new Vue();
Vue.prototype.$bus = EventBus;

Then you add components to your Vue for example

Vue.component('my-component', require('./MyComponent.vue');

Every Vue component has access to the $bus so you can easily just call

created: function() {
   this.$bus.$on('event', function () { ... });
}

Or

this.$bus.$emit('event', data);

Here a full example of my app.js

require('./bootstrap');

/**
 * Add am Event Bus
 */
var bus = new Vue();
Vue.prototype.$bus = bus;

/**
 * Add Components
 */
Vue.component('fv-prompt', require('./components/Prompt.vue'));

/**
 * Add an error handler to the Vue prototype.
 */
Vue.prototype._onError = function(error) {
    Vue.prototype.$bus.$emit('error', error);
};


/**
 * Create and mount the vue instance.
 */
const app = new Vue().$mount('#app');

Where bootstrap is 

window._ = require('lodash');

window.Vue = require('vue');

require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    request.headers.set('Accept', 'application/json');

    next();
});
👤Frnak

Leave a comment