Communicate between two instances vuejs

Asked By: Anonymous

I have 2 separate vue js instances. I need to pass a value from one instance to another instance. which i can pass but can’t bind that value in a model.This is how i am passing info from one instance to another

var holiday = new Vue({});

Emitting value from one instance

holiday.$emit('holiday_id',{
    holiday_id : response.data.id
});

Receiving holiday id whenever second instance is mounted. After that can’t bind that value in a model

mounted() {
    holiday.$on('holiday_id', function(holiday){
        this.temp_holiday_id = holiday.holiday_id;
    });
}

What am i doing wrong, any help would be appreciated.


Solution

Answered By: Anonymous

You are using a regular function in the callback for the event listener. So this does not point to the vue instance and thats the reason you can’t access and modify this.temp_holiday_id
in your data property

So use an arrow function so that this is bound lexically

mounted() {
    holiday.$on('holiday_id', (holiday) => {
        this.temp_holiday_id = holiday.holiday_id;
    });
} 

or set var self = this in the mounted hook so the callback has a closure over self pointing the vue instance

mounted() {
    var self = this;
    holiday.$on('holiday_id', function(holiday){
        self.temp_holiday_id = holiday.holiday_id;
    });
} 
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno