Swiper - 在第一次循环后，第一个项目被错误地呈现但数据是正确的答案

【问题标题】：Swiper - after first cycle the first item is wrongly rendered but data is correctSwiper - 在第一次循环后，第一个项目被错误地呈现但数据是正确的
【发布时间】：2019-03-23 10:46:11
【问题描述】：

我正在使用 Swiper 框架在 Vue 中获取滑块功能。一切工作正常，除了如果我正在过滤我的数据并且在滚动后第一个周期结束后它会向我显示错误的项目。过滤器返回正确的项目，但呈现的 first 项目是错误的。

我发现，只有当我“向下”滑动时才会如此。如果我“向上”滑动。然后一切正常。

我认为问题在于更新。我想在 getter 中返回过滤后的数据之前对其进行更新，但我不知道如何引用我的 swiper 实例？但是后来 vuex 的想法就消失了，因为 vuex 基本上不应该知道任何前端。

这是我的 vuex getter，它过滤我的数据（总是返回正确的数据）：

  filterByCategory(state, getters, rootState) {
      if (rootState.shared.selectedCategory !== 'All') {
        return state.items.filter(
          item => crypto.decrypt(item.category) === rootState.shared.selectedCategory,
        );
      }
      return state.items.filter(item => item.title.toLowerCase().indexOf(getters.filters.searchString.toLowerCase()) >= 0);
    },

我正在使用 mapGetter 来计算我的数据，如下所示：...mapGetters('data', ['filterByCategory']),

这是渲染幻灯片的组件（第一个产品幻灯片渲染错误）：

  <swiper
    ref="productSlider"
    :options="swiperOptions"
    class="product-slider"
    @slideChange="onSlideChange"
  >
    <product-slide
      v-for="item in items"
      :key="item.id"
      :item="item"
    /> 
    <div
      slot="pagination"
      class="product-slider__pagination"
    />
  </swiper>

这些是我的data() 和更新刷卡器的方法：

props: {
    items: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  data() {
    const self = this;
    return {
      swiperOptions: {
        direction: 'vertical',
        loopedSlides: 1,
        spaceBetween: 30,
        slidesPerView: 1,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
          dynamicBullets: true,
          dynamicMainBullets: 1,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.productSlider.swiper;
    },
  },
  updated() {
    if(this.swiper) {
      this.swiper.update();
      console.log('swiper-updated');
    }
  },
  beforeDestroy() {
    if(this.swiper) {
      console.log('swiper-before-destroy');
      this.swiper.destroy();
    }
  },
  watch: {
    items(newValue, oldValue) {
      if (this.swiper) {
        console.log(this.items);
        this.$nextTick(() => {
          this.swiper.update();
        });
      }
    },
  },
  methods: {
    onSlideChange() {
      console.log('Slide did change');
    },
  }

我只是找不到我做错了什么。我还尝试使用observer: true 将更新交给框架来处理。即使那样它也不起作用。我已经尝试了可以从 Google 找到的所有内容，但没有任何效果。我想知道是我还是框架中的错误。非常感谢任何帮助。

我创建了简单的CodePen 示例。

【问题讨论】：

让我再检查一下我的笔！

标签： javascript vue.js swiper

【解决方案1】：

我终于从thisGithub issue 中找到了我的问题的答案！

我所做的是：

我在data() 和方法reRender() 中创建了show 变量，其中包含以下内容：

  reRender(){
      this.show = false
      this.$nextTick(() => {
        //re-render start
        this.show = true
        this.swiper.destroy();
        this.$nextTick(() => {
            //re-render end
            this.swiper.update();
        })
      })
    }

我将:v-if="show" 添加到<swiper></swiper> 组件中。

在 watcher 中，我正在调用 reRender() 函数。

我不确定它有多正确，但它现在可以工作了。

【讨论】：