I'm struggling with event bus. I have a list of notes I display on home ('/'). I use the event bus to update the array when in 3 different places - when deleting, creating or updating a new note. After using different options(delete+create, create+update...) the functions that are triggered by the event listener are triggered few times, creating duplicate items or deleting more than it should. I am using one event bus for all of them. I am using $once and I have placed it on the created hook.
How can I see what's in the event bus and how can I clear it after using it?
//event bus def
var eventBus = new Vue();
export default eventBus;
//the main page, where notes being displayed
template: `
<div>
<h1>this is the home page</h1>
<div class="note-container" v-for="note in notes" :key="note.id">
<component :noteData="note" :is="note.type" class="note" :style="note.style"></component>
</div>
</div>
`,
data() {
return {
notes: []
}
},
created() {
eventBus.$once('noteAdded', data => {
var newNotes = notesService.createNewNote(data)
this.notes = newNotes;
console.log('created activated');
})
eventBus.$once('noteUpdated', note=>{
notesService.updateNote(note)
.then(updatedNotes=>{
this.notes=updatedNotes
console.log('update activated');
})
})
eventBus.$once('noteDeleted', note=>{
notesService.deleteNote(note)
.then(notes=>{
console.log('delete activated');
this.notes=notes
})
})
//where update is being called from
template: `
<div>
<form>
some form
</form>
<button @click="handleUpdate">Update</button>
</div> `,
methods:{
handleUpdate(){
eventBus.$emit('noteUpdated', this.note)
this.$router.push('/')
console.log('handle img');
},
}
//where create is being called from
handleSubmit(){
eventBus.$emit('noteAdded', this.data)
this.$router.push('/')
},
