How to use Flickity Events?

[siberiadev]

Could you tell me how to use events API of Flickity?

this.$refs.slider.on('select', function () {
      console.log(vm.$refs.slider.flickity.selectedIndex);
});

This code doesnt work.
I get the error "Cannot read property 'on' of undefined"

[nikwins]

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.

[lukepearce]

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);

[nikwins]

The ready event still doesn't get triggered for me

[siberiadev]

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 <[email protected]>:

…

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 <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AosBy7efKmmqShYU4SVo8PIqn8iPo54nks5uxRbbgaJpZM4Ysd_1> .

[siberiadev]

setTimeout(() => { this.$refs.flickity.on('change', (event) => { this.$emit('change', event); }); }, 1000);

YEAH!!! IT WORKS!! THANKS

[OriginalEXE]

Use the mounted hook to bind your events, and put it inside the this.$nextTick(() => { });, no need for the setTimeout with a random delay.

[lukepearce]

Use the mounted hook to bind your events, and put it inside the this.$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.

[OriginalEXE]

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?

[lukepearce]

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 🙌

[Yakoot]

Use the mounted hook to bind your events, and put it inside the this.$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.

<flickity ref="flickity"
                @init="onInit"...

and then you can bind your events in onInit method

[CodyEddings]

Is there a sample solution for event listening with Vue 3 & TypeScript?

[CodyEddings]

Solution for Vue 3 & Typescript event listening here