Vue-carousel: Feature request: emit event when currentPage changes

[benjamindedonder]

related: #25

I want to handle navigation from outside the Carousel. I am using Vuex, so it would be handy to have an event emitted when the currentPage changes. I could do it, add a watcher on currentPage that emits an event, and create a pull request, if you want.

I tried this, but it does not work, would be nice though:

watch: {
  '$refs.carousel.currentPage' () {
    if (this.currentPage !== this.$refs.carousel.currentPage) {
      store.dispatch('carousel/currentPageChanged', this.$refs.carousel.currentPage)
    }
  }
}

The rest should work like this (did not test):

computed: {
  ...mapGetters('carousel', [
    'currentPage'
  ])
},
watch: {
  currentPage () {
    if (this.currentPage !== this.$refs.carousel.currentPage) {
      this.$refs.carousel.goToPage(this.currentPage)
    }
  }
}

Thank you!

[toddlawton]

Hi @benjamindedonder,

Were you thinking of using Vue's built in events for this? Perhaps we can emit namespaced events like VueCarousel/pageChange on vm or this.$root whenever goToPage is called. I'd love to see a PR with an implementation of something like this!

Cheers 👍

[benjamindedonder]

I created two pull requests with two possible implementations;
by emitting a local (#29) or a global (#30) event.

I personally prefer a local event.

[toddlawton]

I merged in your change and released it under 0.6.4. Your contribution is appreciated! 🥇

[mandawan]

Hello,

I didn't find out how to use this "Event on page changed" feature properly. Through Vuex $store then ? . Am I wrong or is this not documented yet ? Can you please provide a very quick example, for example an implementation of a listener to that event ? That is just the little last thing I need.

Thanks.

[wglodell]

@mandawan doesn't look like it is in the docs yet, here is how it works

<carousel ref='carousel' @pageChange='carouselPageChange'>

This will call the method carouselPageChange on the parent

    methods: {
      carouselPageChange: function () {
        console.log(this.$refs.carousel.currentPage)
      },

[chrismadrigal]

Yes, an example will be nice. How do you listen to that even on a global component? EJ:

import Vue from 'vue';
import VueCarousel from 'vue-carousel'; 

Vue.use(VueCarousel);

Thanks