vue中swiper初始化问题_vue中使用vue-awesome-swiper遇到的一些问题

最近开发pc官网，用到了轮播图，在这里记录一下使用过程中遇到的问题。

之前用jquery开发项目的时候，用的是swiper3。现在用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过来，结果发现要不是下标小圆点失效，要不就是切换功能失效，不知道问题出在哪里。搞了很久，最后用了swiper3的使用方法。

轮播图引入的版本是"vue-awesome-swiper": "^2.6.7",

main.js里面写的是

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles

import 'swiper/dist/css/swiper.css'

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

HTML内容：

swiper-slide>

div> swiper>

data里的配置：

swiperOption: { // 参数选项,显示小点 pagination: ".swiper-pagination", paginationClickable: true, //循环 loop: true, //每张播放时长3秒，自动播放 autoplay: 2000, // 用户操作swiper之后，是否禁止autoplay autoplayDisableOnInteraction: false, //滑动速度 speed: 1000, // delay:1000 prevButton: ".swiper-button-prev", nextButton: ".swiper-button-next", observer: true, //修改swiper自己或子元素时，自动初始化swiper observeParents: true, //修改swiper的父元素时，自动初始化swiper onSlideChangeStart: function (swiper) { that.active = swiper.realIndex; // this.realIndex + 1 // console.log(swiper.realIndex); }