ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.24k stars 787 forks source link

Uncaught TypeError: Cannot read property 'null' of null when destroying the slider in 'indexChanged' event. #359

Open yukipastelcat opened 5 years ago

yukipastelcat commented 5 years ago

Issue description:
Uncaught TypeError: Cannot read property 'null' of null when calling destroy method in Vue component. Demo link/slider setting:

<template>
  <div class="c-base-datepicker">
    <div class="c-base-datepicker__year">
      <ul data-slider>
        <li
          v-for="year in yearOptions"
          :key="year"
          class="c-base-datepicker__item"
        >
          {{ year }}
        </li>
      </ul>
    </div>
  </div>
</template >

<script>
export default {
  data: function datepicker() {
    return {
      yearOptions: [],
      yearSlider: null,
    };
  },
  mounted: function onMounted() {
    this.yearSlider = tns({
      container: '.c-base-datepicker__year [data-slider]',
      items: 5,
      slideBy: 1,
      autoplay: false,
      axis: 'vertical',
      center: true,
      controls: false,
      nav: false,
      mouseDrag: true,
    });
    this.yearSlider.events.on('indexChanged', () => {
      const info = this.yearSlider.getInfo();
      const { displayIndex } = info;
      this.$_baseDatepicker_updateYearOptions(
        this.yearOptions[displayIndex - 1],
      );
      this.yearSlider.destroy();
      this.yearSlider = this.yearSlider.rebuild();
    });
  },
  methods: {
    $_baseDatepicker_updateYearOptions(year) {
      const yearOptions = [];
      for (let i = -5; i <= 5; i += 1) {
        yearOptions.push(year + i);
      }
      this.yearOptions = yearOptions;
    },
  },
};
</script>

Tiny-slider version: 2.9.1 Browser name && version: Chrome 71.0.3578.98

AdaBan commented 5 years ago

@ganlanyuan I have a similar issue in Angular7 component when using version > 2.8.4