current position:Home>Error using swiper plug-in in Vue

Error using swiper plug-in in Vue

2021-08-24 01:04:54 Xiao Wu 3

Because I'm writing a demo The plug-in was used when , There are some problems , So I simply checked the usage of the plug-in and some common errors

1. appear Get .../maps/swiper.min.js.map 500(Internal Server Error)

Use min Missing version Source Map file
1. prohibit Source Map Tips , Delete swiper.min.js The last line of the document //# sourceMappingURL=swiper.min.js.map that will do
2. If required Source Map, The whole package There is the file swiper.min.js.map, Please put it in the corresponding position . About Source Map

2 . appear Can't rotate automatically , Paging dots are not displayed

  terms of settlement :

install Add version number .

because vue-awesome-swiper There is a version problem with the plug-in package , There may be left and right arrow click failure

The solution is as follows :

npm uninstall vue-awesome-swiper --save

npm install [email protected] --save

installed 3.1.3 After the version of the , Restart the view to solve

3. appear  Error in render: "TypeError: Cannot set property 'params' of undefined"  --- It has something to do with the version number ,4.0 Version capitalized ,3.0 edition , Initial lowercase .

Answer link :https://github.com/surmon-china/vue-awesome-swiper/issues/499

If you are using 3.x edition [email protected] , The import code is as follows :

import { swiper, swiperSlide } from 'vue-awesome-swiper

If you are using 4.x edition [email protected] , The import code is as follows :

import { Swiper, SwiperSlide } from 'vue-awesome-swiper

4. appear Uncaught ReferenceError: Swiper is not defined at...

It may not be loaded JS Wrong file or location

The solution is as follows :

Download the package and load it in the page Swiper Of JS and CSS file , Or use Swiper Of CDN service Load the file , Initialize after loading Swiper

Vue Use in Swiper Can be used as follows :

The first one is : Introduced the global

stay main.js in

 import VueAwesomeSwiper from 'vue-awesome-swiper';
 import "swiper/dist/css/swiper.css";
 
 Vue.use(VueAwesomeSwiper)

 

The second kind : Local introduction

In the of the module used js In file

 Copy code
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
    
    components: {
        swiper,
        swiperSlide
    }
}
 Copy code

 

stay .vue In file , The left and right arrows are placed outside the rotation chart , The code is as follows :

 Copy code
<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>
 
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>
 Copy code

 

stay .vue In file , The left and right arrows are placed inside the rotation chart , The code is as follows :

 Copy code
<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
</swiper>
 Copy code

 

above swiperOption The configuration information of is as follows , Please refer to the official website for details : https://www.swiper.com.cn/api/index.html

copyright notice
author[Xiao Wu 3],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210824010448426Z.html

Random recommended