-
Notifications
You must be signed in to change notification settings - Fork 99
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Question: can I attach event to element, not to window? #71
Comments
Consider this: you have many file-upload-with-previews on the same page. They were inserted from the same Vue component multiple times. Each one of them has
You end up with n listeners and all fire. |
Thanks for the message. Personally, I think the way it is setup makes sense in the current iteration. Unless I'm missing something - you don't need Then, when filtering the event, you just look for the window.addEventListener(Events.IMAGE_ADDED, (e: Event) => {
const { detail } = e as unknown as ImageAddedEvent;
if (detail.uniqueId === 'myFirstId') {
// ...your code
}
}); What's your opinion on this? Is it ok for your usage? |
I have the root Vue component and numerous children set in a loop, each containing file-upload. So where do I have to add eventListener? If I do it in the parent component, I must pass a lambda to a child (God knows why it frightens me). If I add eventListener in a child, I end up with multiple listeners. Right now, I add eventListener in a child, change a tag somewhere in a root div ('events = true'), and other children check whether the tag is set and do not add their listeners. So I have one listener, and this listener checks uniqueId, as you pointed out. |
The event listener is attached directly to the window, no need to enter the loop, or provide further lamdas. Then, you can maybe use a switch on the uniqueId that comes through. Sorry if I'm not fully understanding your use-case. If you could provide some sample code I'd be willing to think through this further. But I think what I've shared should work, unless I'm missing something fundamental with the Vue implementation. |
My question "where do I have to add eventListener" means not "to what object I have to attach eventListener", but "in what point in my program I have to put The skeleton of Vue component looks like
If I add eventlistener in children, I have 10 eventListeners attached to window. If I add eventListener in Parent, I end up with |
Understood. In the case of a Vue app, because this event is directly on the What you need is this I think (for a Vue2 app):
More info here. But this is how I would approach it. |
Where I have to do it, in the parent or in the child?.. |
If it's like 10 children (not 100+) I think it's fine to add it in the child and have multiple handlers attached to the window. Then each child check that its own Another way is to setup the handler in the parent, and pass down the needed result to the children as a prop. There probably is other ways to handle this if you search around a bit. |
Yep. There is something in me that repels the idea of 10 listeners, but maybe it's the same thing as checking html attribute as I do now. The second option I see like this: in parent component IMAGE_ADDED event sets array value, for example [0, 0, 1, 0, 0], array values are fed down to child components by corresponding numbers (6th component receives 1 when image uploaded to 6th, other receive zeroes), and watchers inside child components monitor their input props. All these are feasible... More or less... Clumsy but feasible... |
Yea you got it, sorry it's not ideal. I will continue to keep this in mind going forward. |
Sorry John, I did not have intention to be disgruntled. Your module works just fine inside user-generated tool within Laravel Nova. No tuning needed. It's good as it is. |
No problem at all, glad to hear it. Closing for now. |
It's convenient when you have multiple dialogs on the page.
Thank you!
The text was updated successfully, but these errors were encountered: