How to use Flickity Events? about vue-flickity HOT 12 OPEN

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

from vue-flickity.

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

from vue-flickity.

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.

from vue-flickity.

The ready event still doesn't get triggered for me

from vue-flickity.

from vue-flickity.

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

YEAH!!! IT WORKS!! THANKS

from vue-flickity.

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

from vue-flickity.

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.

from vue-flickity.

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?

from vue-flickity.

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 🙌

from vue-flickity.

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

from vue-flickity.

Solution for Vue 3 & Typescript event listening here

from vue-flickity.