vue-slickでスライドの増減に対応する

先ずはvue-slickのREADMEを元に作成します。
スライドの数を監視し変化のあった際reInitメソッドを呼び出しています。

<template>
  <div>
    <div>
      <button @click="plus">
        plus
      </button>
    </div>
    <div>
      <button
        v-if="slideCount>0"
        @click="minus"
      >
        minus
      </button>
    </div>
    <slick
      ref="slick"
      :options="slickOptions"
      @reInit="handleReInit"
    >
      <div
        v-for="(item,index) in slideCount"
        :key="index"
      >
        <img :src="'https://placehold.jp/3d4070/ffffff/150x150.png?text='+index">
      </div>
    </slick>
  </div>
</template>

<script>

import Slick from 'vue-slick'

export default {
  components: {
    Slick
  },
  data: function () {
    return {
      slideCount: 0,
      slickOptions: {
        slidesToShow: 5
      }
    }
  },
  created () {
    this.slideCount = 5
  },
  watch: {
    slideCount () {
      this.reInit()
    }
  },
  beforeCreate () {
  },
  methods: {
    plus () {
      this.slideCount++
    },
    minus () {
      this.slideCount--
    },
    next () {
      this.$refs.slick.next()
    },

    prev () {
      this.$refs.slick.prev()
    },
    reInit () {
      this.$nextTick(() => {
        this.$refs.slick.reSlick()
      })
    }
  }
}
</script>

上記コードだとスライドの減少には対応できました。しかしスライドの増加が上手くいきません。

そこでshowSlideというステータスを追加します。
さらにreInitの中身を変更しslickコンポーネントにv-ifを追加します。
これでスライドの数が変わる度にスライダーを再描写することで増減に対応できました。

<template>
  <div>
    <div>
      <button @click="plus">
        plus
      </button>
    </div>
    <div>
      <button
        v-if="slideCount>0"
        @click="minus"
      >
        minus
      </button>
    </div>
    <slick
      v-if="showSlide"
      ref="slick"
      :options="slickOptions"
      @reInit="handleReInit"
    >
      <div
        v-for="(item,index) in slideCount"
        :key="index"
      >
        <img :src="'https://placehold.jp/3d4070/ffffff/150x150.png?text='+index">
      </div>
    </slick>
  </div>
</template>

<script>

import Slick from 'vue-slick'

export default {
  components: {
    Slick
  },
  data: function () {
    return {
      showSlide: true,
      slideCount: 0,
      slickOptions: {
        slidesToShow: 5
      }
    }
  },
  created () {
    this.slideCount = 5
  },
  watch: {
    slideCount () {
      this.reInit()
    }
  },
  beforeCreate () {
  },
  methods: {
    plus () {
      this.slideCount++
    },
    minus () {
      this.slideCount--
    },
    next () {
      this.$refs.slick.next()
    },

    prev () {
      this.$refs.slick.prev()
    },
    reInit () {
      this.showSlide = false
      this.$nextTick(() => (this.showSlide = true))
    }
  }
}
</script>