1

我正在使用 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>

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

4

1 回答 1

0

解决方案是返回键的值，如下面的箭头符号所示。

请注意如何调用切换函数末尾的 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]()
}
于 2022-01-08T19:35:16.327 回答