nuxt中单页面调用多个vue-awesome-swiper

用nuxt开发遇到了一个问题！记录一下。
在使用vue-awesome-swiper时，单页面中调用了两个轮播，但只有一个生效，另一个并没有任何效果。
让我们从头来过：

安装、引用、调用三部曲：

npm install vue-awesome-swiper --save 

在plugins中创建vue-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在nuxt.config.js中，找到plugins写入：
{ src: '~/plugins/vue-swiper.js', ssr: false }

<template>
	<div v-swiper:mySwiper="swiperOption" class="clearfix">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
          </div>
          <!--<div slot="pagination" class="swiper-pagination"></div>-->
    </div>
    <div v-swiper:mySwiper="swiperOption2" class="clearfix">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
          </div>
          <!--<div slot="pagination" class="swiper-pagination"></div>-->
    </div>
</template>
<script>
	data() {
	    return {
	      swiperOption: {
	        autoplay: true,
	        loop: true,
	        slidesPerView: 'auto',
	        centeredSlides: false,
	        spaceBetween: 30,
	        pagination: {
	          el: '.swiper-pagination',
	          dynamicBullets: true
	        }
	      },
		 swiperOption2: {
	        autoplay: true,
	        loop: true,
	        slidesPerView: 'auto',
	        centeredSlides: false,
	        spaceBetween: 30
	      },
	}
}
	      
</script>

这个时候我们可以看到，其实第二个swiper 并无效。
只需要改动一个地方即可。

将v-swiper:mySwiper="swiperOption2"
修改为v-swiper:mySwiper2="swiperOption2"

这里的v-swiper绑定了多个swiper的名字，才能调用多个。只需要名字不重复即可。