Почему не работает функция useSwiper слайдера во vue 3?

Question

[Петр Сергеев]

Вроде делаю как в документации https://swiperjs.com/vue#use-swiper

<!-- some-inner-component.vue -->
<template>
  <button @click="swiper.slideNext()">Slide to the next slide</button>
</template>
<script>
  import { useSwiper } from 'swiper/vue';

  export default {
    setup() {
      const swiper = useSwiper();

      return {
        swiper,
      };
    },
  };
</script>

не при нажатии на кнопку "Slide to the next slide" слайдер не перелистывается

Ссылка на код https://codesandbox.io/s/y8ixsp?file=/src/App.vue:...

Какая вообще цель?
мне нужно вынести кнопки с навигация вне слйдера, но как я понимаю сделать это можно только через useSwiper, а он почему-то не работает. А может быть я как-то не верное его подключаю

Answer 1

[0xD34F]

Вроде делаю как в документации

Делаете что? Если бы вы не только копипастили из документации примеры кода, но ещё и читали, что написано рядом, то знали бы, что useSwiper предназначен для того, чтобы

get the Swiper instance in components inside of Swiper

А теперь посмотрите, как относительно друг друга расположены экземпляр swiper'а, до которого вы хотите достучаться, и компонент, где вы делаете вызов useSwiper.

Переделываем.

import { ref } from 'vue';

setup() {
  const swiper = ref();

  return {
    swiper,
    onSwiper: instance => swiper.value = instance,
    ...
  };
},

<swiper
  @swiper="onSwiper"
  ...
>

Comments

[Петр Сергеев]

Да, нужно перенести

<button @click="swiper.slideNext()">Slide to the next</button>

в компонент <swiper>...</<swiper> но дальше в вашем примере не очень поятно, например что такое instance или const swiper = ref(); ведь уже есть const swiper = useSwiper();

[0xD34F]

Да, нужно...

Петр Сергеев, не нужно.

[Петр Сергеев]

0xD34F, все, дошло. Спасибо))
Единственное, с useSwiper все равно не очень ясно, как его использовать. потому что в решении, которое вы дали useSwiper не используется

[0xD34F]

Петр Сергеев, никак не использовать.

[Петр Сергеев]

0xD34F, все, понял- это если бы в компоненте<swiper >...</swiper > был какой-то вложенный компонент. тогда внутри этого вложенного компонента через useSwiper можно было бы обратиться к функция самого слайдера в котором он находится