vue js event bus calls few events
up vote
1
down vote
favorite
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('/')
},
vue.js vuejs2 event-bus
asked Nov 10 at 18:26
yarden
175
add a comment |
up vote
1
down vote
favorite
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('/')
},
vue.js vuejs2 event-bus
asked Nov 10 at 18:26
yarden
175
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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('/')
},
vue.js vuejs2 event-bus
asked Nov 10 at 18:26
yarden
175
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('/')
},
//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('/')
},
//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('/')
},
vue.js vuejs2 event-bus
vue.js vuejs2 event-bus
asked Nov 10 at 18:26
yarden
175
asked Nov 10 at 18:26
yarden
175
asked Nov 10 at 18:26
yarden
175
asked Nov 10 at 18:26
yarden
175
asked Nov 10 at 18:26
yarden
175
175
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
usually, eventBus.$off('event') should turn the event off.
https://vuejs.org/v2/api/?#vm-off
https://alligator.io/vuejs/global-event-bus/
answered Nov 10 at 20:22
Efrat
1415
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you canconsole.trace()inside the $on callback function to see which componnt was triggering the event
– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try addingif(eventBus.eventName){return;}to the beginning of your callback function:eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })
– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the functionif(eventBus.eventName){return;}can be helpful.
– Efrat
Nov 10 at 21:07
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
usually, eventBus.$off('event') should turn the event off.
https://vuejs.org/v2/api/?#vm-off
https://alligator.io/vuejs/global-event-bus/
answered Nov 10 at 20:22
Efrat
1415
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you canconsole.trace()inside the $on callback function to see which componnt was triggering the event
– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try addingif(eventBus.eventName){return;}to the beginning of your callback function:eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })
– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the functionif(eventBus.eventName){return;}can be helpful.
– Efrat
Nov 10 at 21:07
|
show 1 more comment
up vote
2
down vote
usually, eventBus.$off('event') should turn the event off.
https://vuejs.org/v2/api/?#vm-off
https://alligator.io/vuejs/global-event-bus/
answered Nov 10 at 20:22
Efrat
1415
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you canconsole.trace()inside the $on callback function to see which componnt was triggering the event
– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try addingif(eventBus.eventName){return;}to the beginning of your callback function:eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })
– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the functionif(eventBus.eventName){return;}can be helpful.
– Efrat
Nov 10 at 21:07
|
show 1 more comment
up vote
2
down vote
up vote
2
down vote
usually, eventBus.$off('event') should turn the event off.
https://vuejs.org/v2/api/?#vm-off
https://alligator.io/vuejs/global-event-bus/
answered Nov 10 at 20:22
Efrat
1415
usually, eventBus.$off('event') should turn the event off.
https://vuejs.org/v2/api/?#vm-off
https://alligator.io/vuejs/global-event-bus/
answered Nov 10 at 20:22
Efrat
1415
answered Nov 10 at 20:22
Efrat
1415
answered Nov 10 at 20:22
Efrat
1415
answered Nov 10 at 20:22
Efrat
1415
1415
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you canconsole.trace()inside the $on callback function to see which componnt was triggering the event
– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try addingif(eventBus.eventName){return;}to the beginning of your callback function:eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })
– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the functionif(eventBus.eventName){return;}can be helpful.
– Efrat
Nov 10 at 21:07
|
show 1 more comment
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you canconsole.trace()inside the $on callback function to see which componnt was triggering the event
– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try addingif(eventBus.eventName){return;}to the beginning of your callback function:eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })
– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the functionif(eventBus.eventName){return;}can be helpful.
– Efrat
Nov 10 at 21:07
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
Tried to set it to "on" instead of "once" and then use "off", didn't work for me. Is there any way I can see what events are stored in it?
– yarden
Nov 10 at 20:30
you can
console.trace() inside the $on callback function to see which componnt was triggering the event– Efrat
Nov 10 at 20:36
you can
console.trace() inside the $on callback function to see which componnt was triggering the event– Efrat
Nov 10 at 20:36
to prevent executing tha callback function on, try adding
if(eventBus.eventName){return;} to the beginning of your callback function: eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })– Efrat
Nov 10 at 20:43
to prevent executing tha callback function on, try adding
if(eventBus.eventName){return;} to the beginning of your callback function: eventBus.$once('noteAdded', data => { if(eventBus.noteAdded){return;} var newNotes = notesService.createNewNote(data) this.notes = newNotes; console.log('created activated'); })– Efrat
Nov 10 at 20:43
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
trace shows as if it's being called from the same place. I'm getting few of those: notesService.deleteNote.then.notes @ home-page.js:46 Promise.then (async) eventBus.$once.note @ home-page.js:43 on @ vue.js:2471 Vue.$emit @ vue.js:2538 handleDelete @ todo-edit.cmps.js:69 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828 adding the condition didn't work either. any other ideas or maybe it will be a better idea to assume the problem is somewhere else in the code? thanks
– yarden
Nov 10 at 20:54
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the function
if(eventBus.eventName){return;} can be helpful.– Efrat
Nov 10 at 21:07
do you generate the component more than one time? if you have a few same components- all of them will trigger q react to the event, and it will get fired more than once. component can also get duplicated if your using v-if on it. in this case , again, adding to the beginning of the function
if(eventBus.eventName){return;} can be helpful.– Efrat
Nov 10 at 21:07
|
show 1 more comment
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242102%2fvue-js-event-bus-calls-few-events%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
