Vue EventBus 不会传递对象属性

Question

非常感谢你对两个 Vue 单页组件的帮助。

组件 'Searchbar' 包含一个供用户输入的对话框。组件 'ResultList' 中需要这些用户输入以供进一步使用。所以我想用Vue EventBus来传输。

用户输入是一个具有两个属性的对象：

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

并应使用 EventBus 传输到 'ResultList'：

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

in 'ResultList' 是一个侦听器方法，应该将对象存储在组件数据对象中：

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

不幸的是，'ResultList' 的 userInput 对象内部没有任何变化。它的属性 userName 和 taskNr 保持为空 Strings.

我很乐意接受任何想法。提前致谢！

更新

这是在 'Searchbar' 组件中调用 'emitUserInput()' 的代码

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

这里是 'Searchbar' 组件中的数据对象：

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

Answer 1

你在哪里打电话给userInputListener？您实际上可以将 EventBus.$on 放入 mounted() 挂钩中，看看它是否有效：

mounted() {
  EventBus.$on('emitUserInput', payload => {
    this.userInput.userName = payload.userName
    this.userInput.taskNr = payload.taskNr
  })
}

Vue EventBus 不会传递对象属性

Vue EventBus won't transfer object attributes

javascript

event-bus

vue.js

element-ui