vue-tiny-slider: v-on events do not bind to elements cloned for loop
In my slider, each slide has a button that is bound to an event using v-on:click. When I set :loop="true" the slides are cloned in order to create the infinite loop. This appears to happen after the component has rendered, and as a result the cloned elements are not bound to the click event.
Here is a simple example: https://jsfiddle.net/dfg4wt9s/5/
If you click previous to view the cloned “last” slide, its button will not be clickable. Is there a way to bind events to the cloned elements after the slider has initiated without resorting to DOM manipulation?
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 6
- Comments: 17 (6 by maintainers)
@viktorlarsson
Apologies for falling off the face of the earth. After I posted my original findings here I attempted to fork and replicate my fix, but bumped into some issues that I wasn’t able to resolve and ended up having to shelve the change. I ended up getting bogged down in other work and never had a chance to revisit it. Tummerhore’s ping has put this back on my radar though, and in the spirit of Hacktoberfest I’m giving it another shot.
I think I’ve managed to work around the issues I was facing during my last attempt, but I’m still running through all the various test cases that result in different cloning behavior to ensure that there are no holes in my logic. It’s not the most elegant solution, as it involves duplicating functionality from tiny-slider, but I was unable to come up with any other solution for persisting events outside of duplicating the cloning logic in Vue.
I’ll update here and open a PR if my attempt ends up being successful.