How to restart slick slider in Vue on resize?

Question

Slick

I made a slider as a slick component, wrapping it in the layout I needed, etc. The slick slider itself is installed via npm install.
The problem is that after "unslick" is triggered at a certain screen width, then when the breakpoint is changed, it is not restored again. Here is the component

<template>
  <div class="slider-wrapper">
    <Slick
      ref="slick"
      :options="slickOptions"
      @init="handleInit"
      @beforeChange="handleBeforeChange"
      >
        <slot></slot>
    </Slick>
  </div>
</template>

<script>
import Slick from 'vue-slick';

export default {
  props: {
    slidesToShow: {
      type: Number,
      default: 4
    },
    responsive: {
      type: Array,
      default: () => ([
         {
           breakpoint: 992,
           settings: {
             slidesToShow: 3
           },
         },
         {
           breakpoint: 600,
           settings: {
             slidesToShow: 2
           },
         },
         {
           breakpoint: 500,
           settings: 'unslick' 
         }
       ])
    }
  },
  computed: {
    slickOptions() {
      return {
       slidesToShow: this.slidesToShow,
       responsive: this.responsive,
      } 
    },
  components: {
    Slick
  }
}
</script>

I wanted to do as advised in another similar answer, but I don’t understand how to apply it here.

$(document).ready(function() {
    initSlick();
    $( window ).on('resize',function() {
    initSlick();
  });
});

Answer 1

You can try to subscribe to the "resize" event directly in the component and do what you need...

methods: {
  handleResize (event) {
      // your code...
  }
},
mounted () {
  window.addEventListener('resize', this.handleResize);
},
destroyed () {
  window.removeEventListener('resize', this.handleResize);
}