Vue-awesome-swiper: 设置loop: true后swiper-slide嵌套的组件不能通过this.data更新

[buyou0821]

Vue.js version and component version

"vue": "^2.5.2", "vue-awesome-swiper": "^3.1.3",

Reproduction Link

https://jsfiddle.net/bL983fjt/1030/

Steps to reproduce

slide中嵌套的组件是轮询刷新的，设置loop：true后，前后被swiper复制出的slide不会跟随数据的更新而更新了，因为数据量大并且是轮询的，无法写成先请求好数据再初始化swiper，怎么解决呢？

What is Expected?

设置loop: true后，被复制出的页面也能跟随异步数据更新

What is actually happening?

设置loop: true后，第一个页面和最后一个页面不随data变化更新

[zeybar]

尝试destrory 重新插入dom

[rmlzy]

遇到了同样的问题, 有解决方案吗

[buyou0821]

原因是loop: true后，前后两个复制出的页面是通过直接复制dom实现的，所以vue的this.data的赋值操作都无效了。我的解决方法是通过$watch判断当前页面是复制出来的页面时，把this.data的操作改成jq式对dom操作的更新方式，合适的封装后代码改动不会很大，没找到更好的办法了。

[xueqiliu]

可以上一下你的代码吗

[zipme]

try this:

     updated () {
        if (this.mySwiper) {
          this.$nextTick(() => {
            this.mySwiper.loopDestroy()
            this.mySwiper.loopCreate()
          })
        }
      }

[Tannnnnnnks]

try this:

     updated () {
        if (this.mySwiper) {
          this.$nextTick(() => {
            this.mySwiper.loopDestroy()
            this.mySwiper.loopCreate()
          })
        }
      }

我草 你是怎么发现的
How did you find out?

[zipme]

@Tannnnnnnks 谷歌, 哈哈哈哈哈

[zhanyuzhang]

如果担心设置循环会导致复制空白的 slide ，建议先渲染好内容后，再延迟初始化 swiper 。比如：

const swiper = new Swiper( {
  init: false,
  loop: true
  // ... other config
})

// 获取到数据之后并且渲染好了页面，再初始化 swiper
this.$nextTick(() => {
  swiper.init();
});

[marsqinht]

try this:

 updated () {
    if (this.mySwiper) {
      this.$nextTick(() => {
        this.mySwiper.loopDestroy()
        this.mySwiper.loopCreate()
      })
    }
  }

这端代码什么时候执行？

[zhanyuzhang]

@marsqinht updated 是 vue 的生命周期哈

[xierangh]

slideChangeTransitionEnd() {
this.swiper.slideToLoop(this.swiper.realIndex, 0, false);
}
这样做可能好点

[surmon-china]

Everybody, 此刻，可以安装最新版 v4.0.4 来解决此问题，@zipme 提供的 workaround 已内置在最新的组件库代码中，且组件库提供了 @click-slide 事件来支持 loop 模式下 slide 事件失效的问题。

更多详细可参考 最新文档 API 片段。