'How do you call methods in vue3-carousel

Very new to using vue, I just got simple question on how I could access the API supplied by vue3-carousel according to the docs: https://ismail9k.github.io/vue3-carousel/getting-started.html

Under the API section there are a few methods supplied with the library for example I would like to use the: slideTo(index: number) method that the documentation supplied to start the carousel on second item instead of the defaulted first item.

vue.jsvuejs3vue3-carousel


Solution 1:[1]

internally, vue3-carousel uses the expose method in the composition api, which exposes properties/methods on the component instance via template refs.

<template>
   <div>
         <Carousel ref="myCarousel"></Carousel>
         <button type="button" @click="slideToBeginning">to beginning</button>
   </div>
</template>

<script>  

import { ref } from 'vue'

export default {
   setup() {
      //the name of the variable is equal to the ref value of the carousel component
      const myCarousel = ref(null);  

      // now we can use myCarsousel's exposed methods
      const slideToBeginning = () => myCarousel.slideTo(0);

      return {
          myCarousel,
          slideToBeginning 
      }
   }

</script>

Solution 2:[2]

Instead of

const slideToBeginning = () => myCarousel.slideTo(0);

It should be

const slideToBeginning = () => myCarousel.value.slideTo(0);

Solution 3:[3]

To call methods on a component, assign a ref and call the method any time on or after the mounted lifecycle hook.

<template>
    <Carousel ref="carousel"></Carousel>
</template>

// Get the carousel ref
const calendar = this.$refs.carousel

// call the method
carousel.slideTo(3)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 maembe
Solution 2 Husam Ibrahim
Solution 3 Ross Adriano

Related Questions