How to get acces Swiper API on Vue?

Questions
1

I tried a lot of approaches get acces to swiper API on Vue but not one did not work. I read docs…but did not understand how…

			<f7-swiper 	:params="{speed:500, slidesPerView: 'auto', centeredSlides: true, effect: 'coverflow',
						coverflowEffect: {rotate: 0, slideShadows: false, depth: 200,}}"
						id="swiper-pets"
						v-if="this.$root.$data.PetsRows"
						>
				<div class="swiper-pets-name"></div>

				<f7-swiper-slide style ="{background-image: url(img/pets/1.jpg)}" type="all" :key=9999>
					<p style ="{background-color: #2196f3 }">Все питомцы</p>
				</f7-swiper-slide>						
				<f7-swiper-slide
							v-for="slide in this.$root.$data.PetsRows"
							:key="slide.Id"
							type="pet"							
							v-bind:style ="{ 'background-image': 'url(' + slide.Image}"
						  ><p 
								v-bind:style ="{ 'background-color': slide.Color }"
								v-html="slide.Name"	
							></p>
				</f7-swiper-slide>
			</f7-swiper>

i try

export default {
	methods: {

	},
	mounted: function () {
		  console.log('test Swipe');
// var petSwiper =  document.querySelector('#swiper-pets').swiper; //1
// var petSwiper = this.$f7.swiper('#swiper-pets'); //2
 var petSwiper = this.$f7.swiper.get('#swiper-pets');//3

		   petSwiper.removeSlide([0, 1]);
	console.log(petSwiper);
}
}
2

Here you have an example

jsfiddle

i just used mounted to get the instance, and save it in my data.

then i use it

...
  methods: {
    getSwiperInstance () {
    	this.mySwiperInstance = this.$f7.swiper.get('.swiper-container')
    },
    backFromInstance () {
    this.mySwiperInstance.slidePrev()
    }
  }
...

and

<f7-col>
  <f7-button @click='backFromInstance'>Back</f7-button>
</f7-col>
<f7-col>
  <f7-button @click='mySwiperInstance.slideNext()'>Next</f7-button>
</f7-col>
1 Like
3

Issue also could be in v-if="this.$root.$data.PetsRows" on swiper. If on moment when component mounted there is no $root.$data.PetsRows, then you won’t access it mounted hook

1 Like
4

Thanks! The bug was due to the presence of the directive v-if.:+1::grin: