Как передать данные из экземпляра Vue компоненту

Question

Прежде всего, я должен сказать, что я потратил на это много часов, поэтому, если я упустил что-то глупое, то я извиняюсь.

Я пытаюсь заставить один компонент поговорить с другим через корневой экземпляр Vue. До сих пор мне удалось получить MakeComponent отправить сообщение на экземпляр корня, как показано ниже:.

const eventHub = new Vue() // Single event hub 

// Distribute to components using global mixin 
Vue.mixin({ 
    data: function() { 
     return { 
      eventHub: eventHub 
     } 
    } 
}); 

Vue.component('fig-make-dropdown', require('./components/FigMakeDropdown.vue')); 
Vue.component('fig-model-dropdown', require('./components/FigModelDropdown.vue')); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the body of the page. From here, you may begin adding components to 
* the application, or feel free to tweak this setup for your needs. 
*/ 
const app = new Vue({ 
    el: '#app', 

    data: function() { 
     return { 
      makes: {}, 
      make: '', 
      componentMake: '' 
     }; 
    }, 

    mounted() { 
     this.eventHub.$on('broadcast_make', data => { 
      // do your thing 
      console.log('parent', data); 
      this.make = data; 

     }); 
    } 

}); 

The this.eventHub $ на успешно выводит значение грим передается в Что я хочу сделать, это отправить. что для ModelComponent, чтобы он мог перезагрузить вход select с данными из ajax-вызова, используя эту переменную make.

Вот фрагмент кода HTML:

<fig-model-dropdown v-bind:make="make" make="{{ $value->make_id }}" model="{{ $value->model_id }}"></fig-model-dropdown> 

А вот ModelComponent:

<template> 
    <div> 
     <label for="make_model_id">Model</label> 
     <select id="make_model_id" name="make_model_id" class="form-control" v-model="componentModel"> 
      <option value=""></option> 
      <option :value="model.id" v-for="model in models">{{ model.name }}</option> 
     </select> 
    </div> 
</template> 

<script> 
    export default { 

     props: { 
      'make':'', 
      'model': { 
       'default': '' 
      } 
     }, 

     data: function() { 
      return { 
       componentMake: '', 
       componentModel: '', 
       models: {} 
      }; 
     }, 

     created: function() { 
      console.log('fig-model-dropdown Component ready.'); 
      if(this.make) { 
       console.log('MAKE', this.make); 
       this.componentMake = this.make; 
       this.fetchModelsByMake(); 
      } 
      if(this.model) { 
       this.componentModel = this.model; 
      } 
     }, 

     methods: { 
      fetchModelsByMake: function() { 
       this.$http.get('/api/make/models/' + this.make).then(
        function (models) { 
         this.models = models.body; 
//      console.log('MODEL', this.model); 
        }, function (error) { 
          // handle error 
        } 
       );     
      } 
     } 

    } 
</script> 

С помощью этого кода я не получаю ошибки, но без явного указания, что ModelComponent получил его. Как мне теперь передать make в ModelComponent и перестроить выбор?

Answer 1

Кажется, это происходит потому, что ваш this не указывает на правильный объем в методе fetchModelsByMake. Объем этого изменится внутри «этого $ HTTP.» вызов, так что вы просто должны сделать что-то вроде следующего:

 fetchModelsByMake: function() { 
      var self = this 
      this.$http.get('/api/make/models/' + this.make).then(
       function (models) { 
        self.models = models.body; 

// console.log («МОДЕЛЬ», this.model); }, функция (ошибка) { // ошибка обработки } );

Вы также можете посмотреть мой аналогичный ответ here.