drewjbartlett / vue-flickity

A Vue Slider / Carousel Component for Flickity.js
http://drewjbartlett.com/demos/vue-flickity/
374 stars 55 forks source link

How to use Flickity Events? #45

Open siberiadev opened 5 years ago

siberiadev commented 5 years ago

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 commented 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.

lukepearce commented 5 years ago

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 commented 5 years ago

The ready event still doesn't get triggered for me

siberiadev commented 5 years ago

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 .

siberiadev commented 5 years ago

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

YEAH!!! IT WORKS!! THANKS

OriginalEXE commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 3 years ago

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

CodyEddings commented 3 years ago

Solution for Vue 3 & Typescript event listening here