为什么 onclick function 在我的 Vue 应用程序中不起作用？

Question

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 class="carousel">
        <slot :currentSlide="currentSlide" />

        <!-- Navigation -->
        <div class="navigation">
            <div class="toggle-page left">
                <i  @click="prevSlide" class="bi bi-arrow-left-short"></i>
            </div>
            <div class="toggle-page right">
                <i  @click="nextSlide" class="bi bi-arrow-right-short"></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>

Answer 1

You need to return your function from setup also:

return { currentSlide, prevSlide, nextSlide };