记录vue nuxt+element-ui中使用swiper的问题

1、安装swiper依赖

npm install swiper vue-awesome-swiper --save

2、main.js中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
// import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3、组件中使用

<div class="power-swiper" v-swiper:mySwiper="swiperOption" ref="mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" :key="index" v-for="(banner,index) in attestation">
            <img :src="banner.img">
        </div>
    </div>
    <div class="swiper-button-prev" @click="prev()"></div>
    <div class="swiper-button-next" @click="next()"></div>
</div>

swiperOption:{
    slidesPerView : 3,
    spaceBetween : '2%',
    // navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    // },
    //开启循环模式
    loop: true
}

prev() {
    this.$refs.mySwiper.swiper.slidePrev();
},
next() {
    this.$refs.mySwiper.swiper.slideNext();
}

4、问题

可以通过左右滑动图片实现左右切换，左右点击按钮失效

原写法

<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

swiperOption:{
    slidesPerView : 3,
    spaceBetween : '2%',
    navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
    },
    //开启循环模式
    loop: true
}

尝试的解决方案

1. 添加observer属性

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

解决

这是swiper官方在vue中设的坑，左右按钮必须自己绑定事件。我使用的是：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200803090021693.png)

解决方法是：

<div class="swiper-button-prev" @click="prev()"></div>
<div class="swiper-button-next" @click="next()"></div>

methods: {
    prev() {
        this.$refs.mySwiper.swiper.slidePrev();
    },
    next() {
        this.$refs.mySwiper.swiper.slideNext();
    }
},

更新：

如果是组件写法，则prev和next方法中要用this.$refs.mySwiper.$swiper.slideNext()
参考：https://segmentfault.com/q/1010000023107080