Bind swiper events to vuejs events

[rDr4g0n]

This PR binds all documented swiper events to vuejs events. This makes it so the user does not need to bind events directly to the swiper instance using on. Eg:

<template>
    <swiper @slideChange="onSlideChange">
        <!-- ... slides here -->
    </swiper>
</template>

<script>
    export default {
        methods: {
            onSlideChange(swiper){
                // NOTE - this first argument will always be the swiper instance.
                // refer to swiper docs for additional arguments passed to different
                // event callbacks http://idangero.us/swiper/api/#events.
                console.log(`current slide is now ${swiper.realIndex}`)
            }
        }
    }
</script>

Swiper's event handling always binds the swiper instance to the event callback's this context, which won't do for vuejs. This PR adds event handlers to the swiper instance which call to vue's native $emit method, and passes the swiper instance as the first argument. Any other arguments (depending on the event) are passed through as well.

Please let me know if I need to improve something. Thanks!

[JohnRSim]

I tried this approach and pulled latest update but I couldn't get the onSlideChange to trigger..

<swiper :options="swiperOption3" ref="mySwiper3" @slideChange="onSlideChange">

	data() {
		return {
			solutionItem: 0,
			swiperOption: {
				spaceBetween: 500,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			},
			swiperOption2: {
				spaceBetween: 500,
				pagination: {
					el: '.swiper-pagination2',
					clickable: true,
				},
			},
			swiperOption3: {
				spaceBetween: 100,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			}
		};
	},

	methods: {
		toSlide(i) {
			//console.log(i,this.$refs);
			this.$refs.mySwiper3.swiper.slideTo(i, 400);
			this.solutionItem = i;
		},
		activeSolutionItem(solutionItem) {
			return this.solutionItem === solutionItem;
		},
		onSlideChange(swipeID) {
			// NOTE - this first argument will always be the swiper instance.
			// refer to swiper docs for additional arguments passed to different
			// event callbacks http://idangero.us/swiper/api/#events.
			console.log(`current slide is now ${swipeID}`);
		},
	},

[rDr4g0n]

@JohnRSim I just checked locally and am getting all of the event bindings as expected. I wonder what is different in our environments?

How are you importing the vue-awesome-swiper library? Can you verify that the library includes the changed code? Search for "beforeDestroy","slideChange" to verify that the change is present.

Also, are you registering vue-awesome-swiper with vue globally, or locally to the component?

[JohnRSim]

I ran npm update
In my local vue components I have the following

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
	name: 'home',
	components: {
		swiper,
		swiperSlide,
	},

Looking in node_modules\vue-awesome-swiper
I'm running 3.0.7

I did not find "beforeDestroy","slideChange" in my folder or within this git repo - maybe I miss searched?

[rDr4g0n]

@JohnRSim npm install vue-awesome-swiper will install the official vue-awesome-swiper package which does not have the event binding changes. You need my fork of the repo because the event binding changes haven't been merged to the official repo yet.

I was able to install it with npm install --save git+ssh://git@github.com:rDr4g0n/vue-awesome-swiper.git#feature/vue-events. For more information about using npm to install from github, take a look at the npm docs.

[JohnRSim]

ahh - I thought it had been pulled and merged into the official release :)
my bad.. sorry.

[surmon-china]

Update to v3.1.0 please.

[rDr4g0n]

@surmon-china it looks like you already bumped to 3.1.0. Do I need to do anything?

[surmon-china]

@rDr4g0n Thank you for your contribution, no longer need to do anything, he has worked well!