javascript - vue-awesome-swiper / 按钮名称是共享的,所以其他 swiper 也会移动
问题描述
<template>
<swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
export default {
data() {
return {
//sample items
items: [
{
1:1
},
{
2:2
},
{
3:3
},
],
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
}
}
</script>
v-for 创建了很多刷机者。但是,按钮名称重叠,因此滑动器都一起移动。
我在 Swiper API 中寻找可以解决这个问题的东西,但我做不到。
如果有办法解决这个问题,请帮助我......
解决方案
如果您需要唯一名称,请尝试将唯一键添加到 ref:
:ref="'mySwiper' + item.id"
添加冒号(v-bind 的快捷方式)可以item.id
用作变量。