Vue-awesome-swiper: vue2+vue-router 在loop下会刷新页面的问题

[CARVIN94]

在使用loop模式的时候
router-link复制出来用于后面无缝循环的连接点击没有触发vue-router的机制.直接就刷新页面了..

[surmon-china]

我稍后测试，感谢反馈

[surmon-china]

目前你可以在<swiper-slide>组件上绑定@click.native方法来执行方法（this.$router.push(something...)），暂时解决需求，后续的解决方案正在优化中。

[surmon-china]

由于swiper官方并未修复loop模式下附带的一些bug，此问题的解决方法，只能由手动控制点击事件，即为组件绑定点击事件方法，事件发生时获取当前活动状态的slide组建的下标，进行既定操作，此问题暂时关闭。

[iceuncle]

loop模式 导致图片点击失效，要怎么获取下标？

[janein]

Has anyone found a solution to this?
When I use loop:true, the swiper makes a "dumb" copy of the DOM element. As I use vue-logic inside each item, those logics are going missing.
Is there any workaround with swiper or any other slider-plugin for vue?

[surmon-china]

@janein

<swiper-slide @click.native="something(index)" v-for="(item, index) in slides"/>

something(index) { console.log(index + 'slide click') }

bind event with swiper component

<swiper @click="something">

something() {
  console.log('active index', this.swiper.activeIndex)
}

[bovas85]

Duplicated slides don't pass the props properly.
Can you let me know how to fix this? I can't click and do custom events on those

[janein]

@surmon-china thanks, but that's not what I need. I would like to have other Vue-Components inside a <swiper-slide>.

Looks like this:

<swiper-slide>
 <my-custom-component/>
</swiper-slide>

The <my-custom-component> goes dumb inside the looped items, because only a plain html-copy is being made. Gues it'll not be easy to fix this.

[surmon-china]

Swiper loop mode needs to copy html, but there is no duplication of events, so there will be many difficult to solve the problem; Another idea: Listen to swiper sliding events, slide to the last slide, if you continue to slide, use swiper Method to return to the first slide.

[janein]

Yeah this would work fine with slidesPerView: 1, but would not work with multiple items visible at hte same time.

[bovas85]

I've done a hacky thing attaching a click event on the carousel, that will descend nodes into the real image and get the url I need to open the modal into that actual image.

This is just a hack though, I'd like a proper way to deep clone the nodes duplicated

[janein]

I would require to have more complex components sitting in there and not just simple click listeners. There's not much magic in getting them to work.

[KoreSamuel]

如果在同一个slide上绑定多个事件呢，一张slide上点击不同区域有不同相应

[weituotian]

it is the reason of swiper!

[surmon-china]

First, upgrade to v4.x, read the swiper-component-api document.

e.g.

<swiper ref="mySwiper" @click-slide="handleClickSlide" />

function handleClickSlide(index, reallyIndex) {
  console.log('Click slide!', index, reallyIndex)
  this.$router.push({ params: `page-${reallyIndex}` })
}