So Im made an $emit to an event bus in other conponent, where the component run a function 'save' from $on.
Is there a way to send a callback to emit showing that the 'save' function is made succesfully?
Im a bit new to vue. Thanx for all help
You may need to emit a second event using the EventBus to show that the save function was successful. Or, as #samayo mentioned, you could use state (Vuex). Read more about managing state with Vuex here.
Related
I want to know the concept of the below thing-
I have created one component and set up its respected event listeners. Now, I want to remove those listeners on this component's beforeDestroy hook before redirecting to another route that will create another component.
but what I noticed is, beforeDestory hook of the first component is calling even after the second component's created hook.
I want to destroy the first component completely and then create another component.
// To set up the event listeners
created() {
this.EventBus.$on('myCustomEvent', payload => {
// some code here
)}
}
// To destroy the event listeners
beforeDestroy() {
this.EventBus.$off('myCustomEvent');
}
Any suggestions?
In search of an answer to your question, I came to the conclusion that it is better to refuse to use EventBus altogether.
Here is some information on this and some thoughts from there:
I have that feeling that having an EventBus in Vue is an anti-pattern, especially if you’re using VueX but I can’t quite put my finger on it. At the point you want to be sharing data like that, wouldn’t it be better to use a store to handle all of those “events” / “mutations”?
Also, looking at the solution to this issue, you are doing everything right and there is no other way.
I would like to avoid using event bus to being informed when a value in state placed. is there any event when a mutation called? I think it exists since it's event showing in Vue dev tools.
I'm making a wrapper component and have to clear the vuex when I close the component.
I've registered this component in a menu, and parent component is default main page(init page when page is loaded).
So basically, I have to get the data from main component(which is Map(geo json) and displays markers) to pass down(i'm using vuex to share data) the data to grand-child component which is a wrapper component(leaflet-draw) to display maker(main component, grand parent component) information at grand-child component(menu)
But whenever I reopen the grand-child component, it keeps add up existing data. so let say there's 10 data in main component, and then whenever I open it, it just keep adds data cuz it's a wrapper component, and I have to use mounted() hook to get all data info.
so mounted() hook is called everytime I open it, but when beforeDestroy() is called, mounted() hook doesn't work anymore...
Could you please tell me how to use beforeDestory() or destroyed() hook correctly for the wrapper component...?
Many thanks.
It's over 8000 lines so let me know if you need a test case. I will add the github link.
I would add it as a comment but it says that i need 50 rep anyway; as far as i understood you are fetching the data when your wrapper component mounts so; maybe you should write sth like: if state is populated empty the state then fetch the new data in the function where you fetch the data which should be in your actions.
I have a custom Vue component that does not render to HTML.
When the component is first mounted, I am able to loop through this.$listeners and optimize the underlying non-HTML event implementation accordingly (e.g. not to emit mousemove type events unless something is listening).
To complete this process I'd like to know when listeners are programatically added later through $on().
Is there any non-polling way to be notified of this? My current workaround is to listen for and emit everything but that is a poor solution.
Note that in some instances I want to be able to use the events in question, and others not. For example:
<custom-component #eventThatWouldFireOften="doSomething" #anotherEvent="doMoreStuff"/>
and another usage might be simply.
<custom-component ref="custom"/>
...
mounted() {
this.$refs.custom.$on('anotherEvent', ...)
}
So in the first case the result would be:
CustomComponent tells the underlying API it wants to listen for eventThatWouldFireOften and anotherEvent
CustomComponent receives eventThatWouldFireOften and anotherEvent events from the underlying API and re-emits them as Vue events that can be listened to using v-on or # syntax.
..and the second case the result would be:
CustomComponent tells underlying API it doesn't want to listen for anything just yet
When the parent of CustomComponent is mounted it programatically listens for anotherEvent. That needs to be communicated down to the base API (what I'm trying to solve).
Hi Guys, I'm not quite sure how to do this, I'm very new to Vue, how can I send my data from NewDeal component to DealsTable component? As you can see NewDeal has two parent components. I've read about $emit and $on, but just want to confirm if do I really need to do it like newDeal -> QuickActions -> SideBar? And I am not sure how to go from there if what I'm thinking is correct. I hope you can shed some light on me.
I've tried emitting an event from NewDeal component and listening it from the DealsTable component but didn't work, I am not sure if this is possible, or it should really be that the child is a direct descendant of the parent?
Thanks!
Fixed it using a global variable bus and replacing this by bus.
Declaration in app.js:
window.bus = new Vue({})
Emitter:
bus.$emit()
Listener:
bus.$on()
I've tried emitting an event from NewDeal component and listening it from the DealsTable component but didn't work
Looks like you have a solution but I thought I'd comment on this one part in case it helps. The reason that DealsTable didn't see the event from NewDeal is that vue events emitted by a child component are only propagated to the immediate parent component and no higher.
If you want the vue event to be seen higher up the chain then the child's parent would need to emit the event once it listened for the event and received it. In this way each parent could bubble the event up the chain but in many situations that's too complicated, and so your window.bus approach is the way to go. Hope that help make what you were seeing make more sense.