Toggling a single Vue Ref Boolean value using an Object Literal

Question

I am creating a flash card App using Vue3, Vite and Vue3-Carousel. When a user clicks on a flash card the text should change from French to English for that card only, thereby leaving the other cards in their original state.

I have been able to achieve this using a switch statement but after having learned about object literals I am stuck trying to get this to work. Currently, the app toggles all of the cards (and their corresponding Vue Ref boolean values) from French to English when that single card should be toggled only.

Below is a sample of my code:

<script setup lang="ts">
import { ref } from 'vue';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import '../assets/carousel.css';

const FrenchDays = {
    Monday: "Lundi",
    Tuesday: "Mardi",
    Wednesday: "Mercredi",
    Thursday: "Jeudi",
    Friday: "Vendredi",
    Saturday: "Samedi",
    Sunday: "Dimanche"
}

const MondayRevealed = ref(false);
const TuesdayRevealed = ref(false);
const WednesdayRevealed = ref(false);
const ThursdayRevealed = ref(false);
const FridayRevealed = ref(false);
const SaturdayRevealed = ref(false);
const SundayRevealed = ref(false);

const findKey = (obj: any, value: string) => {
    return Object.keys(obj).find(key => obj[key] === value);
}

const toggle = (day: string) => {
    const dayMap = {
        Lundi: MondayRevealed.value = MondayRevealed.value ? false : true,
        Mardi: TuesdayRevealed.value = TuesdayRevealed.value ? false : true,
        Mercredi: WednesdayRevealed.value = WednesdayRevealed.value ? false : true,
        Jeudi: ThursdayRevealed.value = ThursdayRevealed.value ? false : true,
        Vendredi: FridayRevealed.value = FridayRevealed.value ? false : true,
        Samedi: SaturdayRevealed.value = SaturdayRevealed.value ? false : true,
        Dimanche: SundayRevealed.value = SundayRevealed.value ? false : true
    }
    return dayMap[day as keyof typeof dayMap]]
}

const isWordRevealed = (day: string) => {
    const revealMap = {
        Lundi: MondayRevealed.value,
        Mardi: TuesdayRevealed.value,
        Mercredi: WednesdayRevealed.value,
        Jeudi: ThursdayRevealed.value,
        Vendredi: FridayRevealed.value,
        Samedi: SaturdayRevealed.value,
        Dimanche: SundayRevealed.value
    }
    return revealMap[day as keyof typeof revealMap]];

}

const dayToShow = (day: string) => !isWordRevealed(day) ? day : findKey(FrenchDays, day);

</script>

<template>
    <h2>Days</h2>
    <Carousel :itemsToShow="2" :wrapAround="true">
        <Slide v-for="day in FrenchDays" :key="day">
            <div class="carousel__item red" @click="toggle(day)">{{ dayToShow(day) }}</div>
        </Slide>
        <template #addons>
            <Navigation />
            <Pagination />
        </template>
    </Carousel>
</template>

<style scoped>
</style>

My question is, how can I update a single card using my toggle function as opposed to all of them?

Answer 1

The solution was to return the value of a key as is demonstrated using arrow notation below.

Note how the return statement at the end of the toggle function is invoked: dayMap[day as keyof typeof dayMap]()

const toggle = (day: string) => {
    const dayMap = {
        Lundi: () => MondayRevealed.value = MondayRevealed.value ? false : true,
        Mardi: () => TuesdayRevealed.value = TuesdayRevealed.value ? false : true,
        Mercredi: () => WednesdayRevealed.value = WednesdayRevealed.value ? false : true,
        Jeudi: () => ThursdayRevealed.value = ThursdayRevealed.value ? false : true,
        Vendredi: () => FridayRevealed.value = FridayRevealed.value ? false : true,
        Samedi: () => SaturdayRevealed.value = SaturdayRevealed.value ? false : true,
        Dimanche: () => SundayRevealed.value = SundayRevealed.value ? false : true
    }
    return dayMap[day as keyof typeof dayMap]()
}