Vue.js updating data from created functions in a component

Question

I cant update the data properties from created() functions. I tried using 'this' too but i just seem out of scope. Any help? Anyways a sibling component is emitting info on click, which this component should recieve and display as data, very simple, but i when i try to update the main properties of data, they just always stay the same. Im new to vue2 so any help would be appreciated.

const singleAc = Vue.component('singleAc', {
template: `<div class="helper_text">
            <div>  Aircraft with ID : {{ $route.params.aircraftId }} </div>
            <div><img class="airline_logo" src="//logo.clearbit.com/Ryanair.com"></div>
            <div>  Model : {{modelName}} </div>
            <div v-if="fromAp">  From: {{fromAp}} </div>
            <div v-if="toAp">  To: {{toAp}} </div>
         </div>`,
data: function() {
    return {
        company: null,
        modelName: null,
        fromAp: null,
        toAp: null

    }
},
created() {
    bus.$on('op', function(op) {
        singleAc.company = op;
        console.log(op)
    })
    bus.$on('model', function(model) {
        singleAc.modelName = model;
        console.log(model)
    })
    bus.$on('from', function(from) {
        singleAc.fromAp = from;
        console.log(from)
    })
    bus.$on('to', function(to) {
        singleAc.toAp = to;
        console.log(to)
    })
}
});

Answer 1

Forget about global events for now, try passing your aircraft's data with props then your component should access aircraft data by adding:

props: ['aircraft']

Don't forget to point to the aircraft data model. It should look somewhere like this:

`<div :aircraft="aircraft" class="helper_text">
        <div>  Aircraft with ID : {{ aircraft.id }} </div>
        <div><img class="airline_logo" src="//logo.clearbit.com/Ryanair.com"></div>
        <div>  Model : {{aircraft.modelName}} </div>
        <div v-if="fromAp">  From: {{fromAp}} </div>
        <div v-if="toAp">  To: {{toAp}} </div>
     </div>`

Hope it helps.

Answer 2

singleAc is a Vue component and not a Vue instance. That's why changing data like singleAc.company won't work

You still gotta use this

Solution 1: use arrow functions so that this can be used

const singleAc = Vue.component("singleAc", {
    created() {
        bus.$on("op", op => {
            this.company = op;
            console.log(op);
        });
    }
});

Solution 2: store this in a variable

const singleAc = Vue.component("singleAc", {
    created() {
        var _t = this;
        bus.$on("op", op => {
            _t.company = op;
            console.log(op);
        });
    }
});

Hope this helps.

Answer 3

binding this actually solved the problem

 bus.$on('to', function(to) {
     this.toAp = to;
 }.bind(this))