please help me solve the following. I am trying to add onclick event to my slider, and while am using Vue 3, the esling gives me 'is assigned a value but never used, no-unused-vars' error. the below is my code, could someone please help.

<template>
    <div >
        <slot :currentSlide="currentSlide" />

        <!-- Navigation -->
        <div >
            <div >
                <i  @click="prevSlide" ></i>
            </div>
            <div >
                <i  @click="nextSlide" ></i>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
    setup() {
        const currentSlide = ref(1);
        const getSlideCount = ref(null);

        // next slide
        const nextSlide = () => {
            if (currentSlide.value === getSlideCount.value) {
                currentSlide.value = 1;
                return;
            }
            currentSlide.value  = 1;
        };

        // prev slide
        const prevSlide = () =>{
            if(currentSlide.value === 1){
                currentSlide.value = 1;
                return;
            }
            currentSlide.value -= 1;
        }


        onMounted(() => {
            getSlideCount.value = document.querySelectorAll('.slide').length;
        })

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

CodePudding user response：

You need to return your function from setup also:

return { currentSlide, prevSlide, nextSlide };