Question

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

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

我认为问题在于更新。我想先更新它，然后再在getter中返回经过过滤的数据，但是我不知道如何引用我的swiper实例？但是后来vuex的想法消失了，因为vuex基本上不应该了解前端。

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

  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示例。

Answer 1

我终于从this Github问题中找到了我问题的答案！

我所做的是：

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

  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>组件中。

在观察程序中，我正在调用reRender()函数。

我不确定它的正确性，但是现在可以正常工作。

刷卡-第一个循环后，第一个项目被错误地渲染，但数据正确

1 个答案: