Vue-carousel: Bug: Event pageChange and in-dom rendering

[GMSteuart]

The pageChange event cannot be listened to with in-dom rendering due to event being camel cased.

For reference, Evan You recommends not using camelcase events if in-dom rendering is to ever be used for a Vue component. https://github.com/vuejs/vue/issues/4839

[yawuar]

Hi!

Is this bug fixed already because I still have the Vue tip.

Thank you!

[quinnlangille]

Hey @yawuar, we've merged the PR for this fix and will be deploying it with v0.6.6!

[nick-jonas]

I'm using v0.6.8 and the event isn't firing off for me - am I doing something wrong? I've tried both v-on:pagechange and v-on:pageChange but my handler isn't firing...

<template>
  <div class="welcome-cards">

    <carousel v-bind:per-page="perPage" v-bind:paginationSize="paginationSize" pagination-color="#1967d2" pagination-active-color="#FFFFFF" v-on:pagechange="onPageChange">
      <slide v-for="slide in image_paths" :key="slide">
        <div class="image-container">
          <img v-bind:src="slide" alt="">
        </div>
      </slide>
    </carousel>

  </div>
</template>

<script>
  import Vue from 'vue';
  import VueCarousel from 'vue-carousel';
  Vue.use(VueCarousel);

  import { Carousel, Slide } from 'vue-carousel';

  export default {
    name: 'welcome-cards',
    data () {
      return {
        perPage: 1,
        paginationSize: 3,
        image_paths: [
          'static/images/cards/welcome.png',
          'static/images/cards/document.png',
          'static/images/cards/flashcard.png',
          'static/images/cards/french.png',
          'static/images/cards/ingredients.png',
          'static/images/cards/learnoffline.png',
          'static/images/cards/offlinejapan.png',
          'static/images/cards/wordeveryday.png'
        ]
      }
    },
    components: {
      Carousel,
      Slide
    },
    methods: {
      onPageChange: function(val){
        console.log('change', val)
      }
    }
  }
</script>

<style lang="scss">
  .welcome-cards{
    margin-top:70px;
    overflow: hidden;
    width: 100%;

    .image-container{
      width:380px;
      margin:0 auto;
    }
    img{
      max-width:100%;
    }

    .VueCarousel-pagination{
      position: relative;
      top: -70px;
    }

  }
</style>

[GMSteuart]

The handler in your vue component should be firing with @pageChange, so I am not entirely sure what the problem could be.

The only thing that sticks out to me is that
import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);
should be placed in your app.js, main.js, file, or whatever your root file is called for initializing your vue project, but might not be necessary.

The issue here that you are replying to specifically deals with the event being emitted when the component is rendered in-dom.

Edit: also i do not believe you need
import { Carousel, Slide } from 'vue-carousel';
and
components: { Carousel, Slide },
because you have Vue.use(VueCarousel);

[nick-jonas]

@GMSteuart you're right, I should've included the component that way, but that wasn't the issue. It has to do with when I click and drag the carousel to the next/prev page, the event doesn't fire (it should). It only fires when I click on a nav dot.

I can't get your build process to work here to do a complete pull request, but if you add this to the end of your render() method on line 622 of Carousel.vue, it works:

this.$emit("pageChange", this.currentPage);

[GMSteuart]

@nick-jonas thank you for the update on this

[quinnlangille]

@nick-jonas - I can add the change no problem, but if you'd like to contribute yourself I can help debug whatever's blocking your PR. Thanks for figuring that out :~)

[nick-jonas]

@quinnlangille all good, it's a simple line change - go for it!