Vue.js actualiza datos de funciones creadas en un componente: javascript, object, vuejs2, this

No puedo actualizar las propiedades de los datos de created ()funciones. Intenté usar "esto" también, pero parece que estoy fuera de alcance. ¿Alguna ayuda? De todos modos, un componente hermano emite información al hacer clic, que este componente debería recibir y mostrar como datos, muy simple, pero cuando intento actualizar las propiedades principales de los datos, siempre permanecen igual. Soy nuevo en vue2, por lo que cualquier ayuda sería apreciada.

const singleAc = Vue.component("singleAc", {
template: `<div class="helper_text">
<div>  Aircraft with ID : {{ $route.params.aircraftId }} </div>
<div><img class="airline_logo" src="/images///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)
})
}
});

Respuestas

Olvídese de los eventos globales por ahora, intente pasar los datos de su aeronave con accesorios entonces su componente debería acceder a los datos de la aeronave agregando:

props: ["aircraft"]

No olvide señalar el modelo de datos de la aeronave. Debería verse en algún lugar así:

`<div :aircraft="aircraft" class="helper_text">
<div>  Aircraft with ID : {{ aircraft.id }} </div>
<div><img class="airline_logo" src="/images///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>`

Espero eso ayude.

singleAc es un componente de Vue y no una instancia de Vue. Por eso, cambiar datos como singleAc.company ganó "t trabajo

Todavía tienes que usar this

Solución 1: utilizar las funciones de flecha para que this puede ser usado

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

Solución 2: almacenar this en una variable

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

Espero que esto ayude.

atar esto realmente resolvió el problema

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