Destroy/Init swiper slide на vue в зависимости от ширины экрана, как правильно?

Question

[awpman]

Необходимо подключить слайдер только на мобильных разрешениях ниже 768px.

<template>
      <swiper ref="mySwiper" :options="swiperOption">
        <swiper-slide>
          <div class="slideItem"></div>
        </swiper-slide>
      </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {

	name: 'SwiperCarousel',

	components: {
		Swiper,
		SwiperSlide
	},

	data() {
		return {
			swiperOption: {
				// direction: 'vertical',
			}
		}
	},
}
</script>

Answer 1

[Дмитрий Беляев]

Как-то так можно:

<template>
      <swiper v-if="isShown" ref="mySwiper" :options="swiperOption">
        <swiper-slide>
          <div class="slideItem"></div>
        </swiper-slide>
      </swiper>
</template>

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {

  name: 'SwiperCarousel',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      isShown: false,
      swiperOption: {
        // direction: 'vertical',
      }
    }
  },
  mounted() {
    const media = window.matchMedia('(max-width:768px)');
    const listener = e => this.isShown = e.matches;
    listener(media);
    media.addListener(listener);
    this.$once('hook:beforeDestroy', () => media.removeListener(listener));
  }
}

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Comments

[awpman]

Поспешил с ответом, к сожалению нет - не то что нужно, Ваше решение убирает слайдер полностью, а нужно его уничтожить, а сам контент оставить. Есть готовое решение на JS моей задачи (РЕШЕНИЕ), и я это решение успешно применял в проектах без VUE, но как его реализовать красиво на VUE?? Т.е. на ширине выше 768px слайдер необходимо "уничтожить", а если пользователь опять изменит ширину экрана на ниже 768 его "перезапустить".