Looking for assistance with integrating two Vue single page components.
The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this, I intend to utilize Vue EventBus for communication.
The user input consists of an object with two properties:
userInput: {
userName: '',
taskNr: ''
},
This data should be transferred to the 'ResultList' component using the EventBus:
emitUserInput: function () {
EventBus.$emit('emitUserInput', this.userInput)
}
In the 'ResultList' component, there is a listener method responsible for storing the received object within the component's data-Object:
userInputListener: function () {
EventBus.$on('emitUserInput', setUser => {
this.userInput.userName = $userInput.userName
this.userInput.taskNr = $userInput.taskNr
})
}
However, the attributes 'userName' and 'taskNr' within the userInput-object of 'ResultList' are not being updated as expected. They remain empty strings.
Welcome any suggestions or ideas. Thank you!
Update
Below is the code from the 'Searchbar' component calling the 'emitUserInput()' method:
<el-form-item>
<el-button @click='emitUserInput(), toggleInputForm = false'>Confirm</el-button>
</el-form-item>
And here is the data object within the 'Searchbar' component:
data () {
return {
userInput: {
userName: '',
taskNr: ''
}
}