I recently started working with Vue and am currently exploring the best way to organize my event bus. In my project, I have a main layout view (Main.vue) that includes a router view where I pass emitted information from a child component like this:
<template>
<layout>
<router-view :updatedlist="mainupdate" />
</layout>
</template>
import { EventBus } from './event-bus.js'
export default {
data () {
return {
mainupdate: []
}
},
mounted () {
EventBus.$on('listupdated', item => {
this.mainupdate = item
console.log(item)
})
}
}
The structure of my project is as follows: Main.vue contains Hello.vue, which makes an axios call to fetch data that it then passes on to child components such as Barchart.vue, Piechart.vue, and Datatable.vue.
In Hello.vue, the axios call populates a data property called list. I check if the prop updatedlist (sent from Datatable.vue to Main.vue when something changes) is empty, and if so, set it to the value of list.
Although I can see that the event is successfully emitted and received by Main.vue based on the data displayed in the console, my child components are not updating even though they use updatedlist as their data source. (They do update upon page reload, but why aren't they reactive?)
UPDATE: To try and address the issue, I removed the top-level parent Main.vue and placed the EventBus$on inside Hello.vue instead. However, this resulted in two problems:
- Upon each page refresh, the console log adds one more entry to the list, displaying all previous logs as well. This means the list keeps growing until the app is restarted.
- My child components STILL do not get updated :(
UPDATE 2: It seems that the lack of reactivity in my chartsjs components, specifically in Barchart.vue and Piechart.vue, is causing the issue with the updates. A basic component I created to simply display the total length does get updated correctly. However, the mystery of the excessive duplicate console logs remains unsolved. Any suggestions?