vue|vue vue-awesome-swiper 复制的节点绑定的click事件失效（loop（true引起））
场景：banner 用插件vue-awesome-swiper实现，loop属性为true，那么会有节点被复制，难么被复制的节点没有绑定点击事件
通过 swiper 强大的 api 文档，解决了上述出现的问题。关键点在于：
- 当 loop 设置为 true 的时候，不能再用 activeIndex 或者 clickedIndex。只能用realIndex。官方的解释为：当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
- 点击事件不能绑定在 dom 上
1" class="banner parent-banner">
文章图片
【vue|vue vue-awesome-swiper 复制的节点绑定的click事件失效（loop（true引起））】js代码
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'let vm = null;
export default {
created () {
vm = this
this.fetchBanner()
},
data () {
return {
bannerList: [],
// 轮播配置项
swiperOption: {
notNextTick: true,
pagination: {
el: '.banner-swiper-pagination'
},
autoplay: {
stopOnLastSlide: false,
disableOnInteraction: false
},
delay: 1000,
loop: true,
on: {
click () {
// 这里有坑
// 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
// console.log(this);
// -> Swiper
// 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
const realIndex = this.realIndex
vm.buriedPoint(vm.bannerList[realIndex])
}
}
}
}
}
components: {
swiper,
swiperSlide
},
methods: {
// 获取banner
fetchBanner () {
this.$http.get('v1/common/banner', {
params: {
banner_position_name: '首页顶部一',
type: 2
}
}).then(response => {
let data = https://www.it610.com/article/response.data.meta
this.bannerList = data
}).catch(err => {
this.$utils.showErrorMsg(err)
})
},
// 广告埋点
buriedPoint (info) {
this.$ba && this.$ba.trackEvent('教师端首页顶部一', '点击', `${info.name}(${info.id})`)
let timer = setTimeout(() => {
location.href = https://www.it610.com/article/info.url
clearTimeout(timer)
}, 100)
}
}
}
原文链接：https://juejin.im/post/5b23b7cde51d4558b0354ad2
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show