Как перезапускать slick slider на Vue при ресайзе?

Question

[danilr]

Сделал компонентой slick слайдер, обернув его в нужную мне верстку и т.п. Сам slick слайдер установлен через npm install.
Проблема в том, что после того как при определённой ширине экрана срабатывает "unslick", то при изменении брейкопинта он не восстанавливается вновь. Вот компонент

<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>

Хотел сделать как советовали в другом похожем ответе, но как тут применить я не понимаю.

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

Comments

[Ярослав Иванов]

Зачем ?

Люди, когда пользуются сайтом не играются с размером браузера

[danilr]

Ярослав Иванов, чувство прекрасного.

Answer 1

[ctpayc]

Можешь попробовать прям в компоненте подписаться на событие "resize" и делать что нужно...

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