Vue EventBus не будет передавать атрибуты объекта

LuGeNat спросил: 31 июля 2018 в 09:43 в: javascript

Я был бы признателен за вашу помощь с двумя компонентами Vue Single Page.

Компонент "Панель поиска" содержит диалоговое окно для пользовательских входов. Эти пользовательские входы необходимы в компоненте "ResultList" для дальнейшего использования. Поэтому я хочу использовать Vue EventBus для передачи.

Пользовательский ввод - это объект с двумя атрибутами:

userInput: {
    userName: '',
    taskNr: ''
  },

и должен быть переведен в 'ResultList' с EventBus:

emitUserInput: function () {
  EventBus.$emit('emitUserInput', this.userInput)
}

в 'ResultList' - это метод прослушивателя, который должен хранить объект в данных компонентов. Object:

userInputListener: function () {
  EventBus.$on('emitUserInput', setUser => {
    this.userInput.userName = $userInput.userName
    this.userInput.taskNr = $userInput.taskNr
  })
}

К сожалению, внутри userInput-объекта 'ResultList' нет изменений. Его атрибуты userName и taskNr остаются пустыми.

Я был бы рад любым идеям. Заранее спасибо!

Обновить

Вот код, вызывающий 'emitUserInput ()' внутри компонента Searchbar '

<el-form-item>
      <el-button @click='emitUserInput(), toggleInputForm = false'>Bestätigen</el-button>
</el-form-item>

И вот объект данных в компоненте "Searchbar":

data () {
  return {
    userInput: {
      userName: '',
      taskNr: ''
  } 
}

1 ответ

Есть решение
dziraf ответил: 31 июля 2018 в 10:37

Куда вы звоните userInputListener? На самом деле вы можете поместить EventBus.$on в ловушку mounted() и посмотреть, работает ли он:

mounted() {
  EventBus.$on('emitUserInput', payload => {
    this.userInput.userName = payload.userName
    this.userInput.taskNr = payload.taskNr
  })
}
LuGeNat ответил: 31 июля 2018 в 11:07
Спасибо, что сделал работу за меня!