Open siberiadev opened 5 years ago
Try
this.$refs.flickity.on('select', function () {
console.log(vm.$refs.flickity.selectedIndex());
});
Otherwise just console.log this.$refs to see how your component is named.
This works for me with every event besides the "ready" Event. I don't see why it's not triggered, so if anybody has an idea, please let me know.
If I wrap the event listener in a timeout I don't get the error.
setTimeout(() => {
this.$refs.flickity.on('change', (event) => {
this.$emit('change', event);
});
}, 1000);
The ready event still doesn't get triggered for me
Yeah, when I console my refs I can see flickity object, but when I’m trying to call .on event it callback an error I told you before. Any ideas?
ср, 21 нояб. 2018 г. в 17:03, nikwins notifications@github.com:
Try this.$refs.flickity.on('select', function () { console.log(vm.$refs.flickity.selectedIndex()); });
Otherwise just console.log this.$refs to see how your component is named
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/drewjbartlett/vue-flickity/issues/45#issuecomment-440587827, or mute the thread https://github.com/notifications/unsubscribe-auth/AosBy7efKmmqShYU4SVo8PIqn8iPo54nks5uxRbbgaJpZM4Ysd_1 .
setTimeout(() => { this.$refs.flickity.on('change', (event) => { this.$emit('change', event); }); }, 1000);
YEAH!!! IT WORKS!! THANKS
Use the mounted
hook to bind your events, and put it inside the this.$nextTick(() => { });
, no need for the setTimeout with a random delay.
Use the
mounted
hook to bind your events, and put it inside thethis.$nextTick(() => { });
, no need for the setTimeout with a random delay.
I get TypeError: Cannot read property 'on' of undefined
when I place in mounted
using nextTick
. If I console log this.$refs.flickity
I can see the component.
That's weird. Could you create a reproduction on codesandbox? I would be interested in finding out what's causing it.
You are immediately rendering it inside a component, right?
After starting to set this up on codesandbox I remembered that I adapted vue-flickity
into my own component (to add a few things) and in doing so I'm actually using https://github.com/metafizzy/flickity-bg-lazyload instead of the standard flickity lib.
I expect it's either a change in flickity-bg-lazyload
or perhaps something to do with a feature I added that allows me to delay the start of a carousel. Regardless of what it might be, it isn't on you to help me debug that ;)
Thanks for your suggestions so far and writing the component in the first place 🙌
Use the
mounted
hook to bind your events, and put it inside thethis.$nextTick(() => { });
, no need for the setTimeout with a random delay.I get
TypeError: Cannot read property 'on' of undefined
when I place inmounted
usingnextTick
. If I console logthis.$refs.flickity
I can see the component.
<flickity ref="flickity"
@init="onInit"...
and then you can bind your events in onInit method
Is there a sample solution for event listening with Vue 3 & TypeScript?
Solution for Vue 3 & Typescript event listening here
Could you tell me how to use events API of Flickity?
This code doesnt work. I get the error "Cannot read property 'on' of undefined"