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

Question

請幫我解決以下問題。 我正在嘗試將 onclick 事件添加到我的 slider，並且在使用 Vue 3 時，esling 給我“已分配一個值但從未使用過，沒有未使用的變量”錯誤。 以下是我的代碼，有人可以幫忙嗎。

<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

您還需要從設置中返回您的 function：

return { currentSlide, prevSlide, nextSlide };