javascript - vue.js 插件使用出错(vue-awesome-swiper)
怪我咯
怪我咯 2017-04-11 13:30:45
0
2
637

新手入门,vue.js插件vue-awesome-swiper使用时遇到了些问题
就是效果实现了,但是不知道怎么调用swiper的API对swiper进行控制
效果实现代码:

<template>
  <p class="swiperComponent">

    <swiper :options="swiperOption">
      <swiper-slide class="swiper-no-swiping" data-id="swiper" v-for="(slide, slideIndex) in answer">
        <p>
            {{ slide }}
          <h3>{{slide.title}}</h3>
          <label v-if="!slide.check" v-for="(option, index) in slide.options">
            <!-- <input type="checkbox" :name="slide.item" :value="index" v-model="checkList.check"> -->
            <input type="checkbox" :name="slide.item" :value="index" v-model="currentCheckList[slideIndex].currentOption">
            <span>{{option}}</span>
          </label>
          <label v-else>
            <input type="radio" :name="slide.item" :value="index" v-model="currentCheckList[slideIndex].currentOption">
            <span>{{option}}</span>
          </label>
        </p>
      </swiper-slide>
      <p class="swiper-pagination" slot="pagination"></p>
      <!-- <p class="swiper-button-prev" slot="button-prev"></p> -->
      <p v-if="!lastPage" class="swiper-button-next swiper-button" slot="button-next" @click="nextPage">下一题</p>
    </swiper>
      <p v-if="lastPage" class="swiper-button-next swiper-button submit-button" @click="nextPage">提交答卷</p>
  </p>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationType: 'progress'
      },
      swiperSlides: [1, 2, 3, 4, 5],
      currentPage: 1,
      lastPage: false,
      currentCheckList: []
    }
  }
// 代码片段

以上代码可以使用swiper了,请问我该怎么调用swiper的API
按照文档上这样做了

import Vue from 'vue'
import AwesomeSwiper from 'vue-awesome-swiper'
Vue.use(AwesomeSwiper)

之后该怎么办?

怪我咯
怪我咯

走同样的路,发现不同的人生

Antworte allen(2)
刘奇

文档有写哦,
SPA模式下:用ref属性获取swiper实例对象,便可以在宿主组件使用swiper对象的所有方法和操作
SSR模式下:attr-name获取swiper实例对象,使用同上

Peter_Zhu

请问这个swiper还要配置吗?直接拿来用不了啊

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!