使用对象文字切换单个 Vue Ref 布尔值

Question

我正在使用 Vue3、Vite 和 Vue3-Carousel 创建一个闪存卡应用程序。当用户单击闪存卡时，文本应仅针对该卡从法语更改为英语，从而使其他卡保持原始状态。

我已经能够使用 switch 语句实现这一点，但是在了解了对象文字之后，我一直在努力让它发挥作用。目前，应用程序将所有卡片（及其相应的 Vue Ref 布尔值）从法语切换为英语，而应仅切换单个卡片。

下面是我的代码示例：

<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>

我的问题是，如何使用我的切换功能更新单张卡片而不是所有卡片？

Answer 1

解决方案是 return 键的值，如下面使用箭头表示法所示。

请注意切换函数末尾的 return 语句是如何被调用的： 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]()
}

使用对象文字切换单个 Vue Ref 布尔值

Toggling a single Vue Ref Boolean value using an Object Literal

javascript

vue.js

object-literal

vite

vue3-carousel