vue-awesome-swiper,怎么禁止翻页？？

Question

问题是这样的，底部是表单，验证表单中的字段obtain,当为空的时候禁止翻页。。（用的vue-awesome-swiper）

 <swiper-slide  v-for="(item, index) of data" :key="index">
    <form ref="form" :model="item" :rules="rules">
    //...省略
        <el-form-item  class="footer-score" prop="obtain">
            <span>满分：<div class="footer-sub-score">{{item.score}}分</div></span>
            <span>评分：
              <el-input-number :min="0" class="number" style="width:80px" v-model.trim="item.obtain" controls-position="right" size="small"/>
            </span>
         </el-form-item>
    </form>
</div>


----------
rules: {
  obtain: [
    { required: true, message: '请输入评分', trigger: 'blur' },
  ],
},
// 目前是这么写的，但是还是可以翻页
swiperOption: {
  notNextTick: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',//分式指示器  
  },
  initialSlide: this.current,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  on: {
    init() {
      self.lengths = this.slides.length - 1;
    },
    transitionEnd() {
      self.bannerIndex = this.activeIndex + 1;
      const prevIndex = this.previousIndex;
      const i = this.activeIndex - 1;
      if (prevIndex === i) {
        self.$refs.form[i].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
  },
},

Answer 1

参考下 https://www.swiper.com.cn/api...，希望有所帮助