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

Question

请帮我解决以下问题。我正在尝试将 onclick 事件添加到我的滑块，并且在使用 Vue 3 时，esling 给我 'is assigned a value but never used, no-unused-vars' 错误。以下是我的代码，有人可以帮忙吗。

<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

您还需要 return 您的设置功能：

return { currentSlide, prevSlide, nextSlide };

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

why onclick function is not working in my Vue app?

javascript

vue.js

vuejs3