why onclick function is not working in my Vue app?

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>

Nikola Pavicevic · Accepted Answer · 2022-05-25 07:52:02Z

2

You need to return your function from setup also:

return { currentSlide, prevSlide, nextSlide };

answered May 25, 2022 at 7:52

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user5734311 Over a year ago

Which means this is a typo question, and now OP can no longer delete it themselves.

Bravo Over a year ago

is missing two whole functions in a return statement really a "typo" @ChrisG, or a lack of knowledge of what to return in vue composition API - my vote is for the latter, and that this answer actually taught the OP how to use vue

user5734311 Over a year ago

@Bravo Note that since people will usually deliberately misinterpret my point and paint me as hating newbies: that's not what this is about. Helping OP with a comment is perfectly fine. And afterwards, the question gets deleted and we all move on.

Bravo Over a year ago

@ChrisG I haven't deliberately done anything nor accused you of anything - I jsut expressed an opinion on what a typo is ... retrun { ...... } is a typo ... return { oneThingInsteadOfThree} is lack of knowledge :p

kissu Over a year ago

@ChrisG especially since event something like :value is not considered a typo vs value. We could also say that everybody doing TS are just drunk people who are missing some types if we take this path. Of course people could read the documentation more in depth but it's not the actual point here. Also, a greater thing would maybe be to close this question as a duplicate with a user who has a golden tag in Vue (not my case yet). Still, a totally valid answer so far.

|

Collectives™ on Stack Overflow

why onclick function is not working in my Vue app?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related