在Vue项目中使用Swiper插件,出现
Error in nextTick: "TypeError: Cannot read property 'removeEventListener' of undefined"
引用Swiper的代码如下:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import './registerServiceWorker'
Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper, /* { default global options } */)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
html
<swiper id="mySwiper" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide><img src="../assets/img_banner.png"></swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
script
import projectItem from '@/components/projectItem.vue'
export default {
// name: 'home',
data () {
return {
swiperOption: {
autoplay: false,
//分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
},
selected: 0, //顶部所选模块
openMine: false, //打开我的选项
}
},
methods: {
callback () {
},
top_choice (index) {
this.selected = index
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
}
请问是哪里注册插件出了问题吗?
html里没有分页器【pagination】以及前进后退按钮【navigation】的话JS里就不要绑定、这样就解决了