Vue3记忆游戏点击卡片时同组两张同时翻转问题求助

核心原因 #

你遇到的问题本质是对象引用共享：当执行this.selection.push(item, item)时，两次添加的是同一个对象的引用，数组里的两个“卡片”其实指向内存中同一个数据对象。所以修改其中一个的isFlipped属性时，另一个也会同步变化——因为它们根本就是同一个东西。

解决方法 #

要让每张卡片都是独立的个体，必须在添加时复制对象，而不是直接复用同一个引用。同时还要修复模板中错误的key绑定（Vue的v-for需要唯一key来正确跟踪DOM元素）。

1. 修改卡片初始化代码

把原本直接push同一个item的逻辑，改成push对象的副本：

created() {
  this.allCards.forEach((item) => {
    // 用展开运算符创建两个独立的对象副本
    this.selection.push({ ...item }, { ...item });
  });
  this.selection = this.shuffle(this.selection);

  this.selection.forEach((card, index) => {
    card.isFlipped = false;
    // 给每张卡片添加唯一标识，用于v-for的key
    card.uniqueId = `${card.id}-${index}`;
  });
}

如果卡片对象有嵌套属性，需要用深拷贝（比如JSON.parse(JSON.stringify(item))）；若只是简单扁平对象，展开运算符足够。

2. 修复模板的key绑定

原模板中:key="card[index]"是错误的，改成使用我们刚才添加的uniqueId或者直接用循环的index（推荐前者，更可靠）：

<template>
  <div class="cardwrap row row-cols-6 row-cols-md-8 g-3">
    <div class="card" v-for="(card, index) in selection" :key="card.uniqueId">
      <img @click="flipCard(card)"
        :src="card.isFlipped ? `../assets/animals/${card.image}` : '../assets/square.jpg'"
        :alt="card.id"
      />
    </div>
  </div>
</template>

为什么手动添加两次可行？ #

因为你手动在数据文件里添加的两个相同卡片是两个独立的对象，它们的属性值一样，但在内存中是不同的引用，所以修改其中一个的isFlipped不会影响另一个。我们上面的代码就是用代码实现了这个手动操作的效果。

内容的提问来源于stack exchange，提问作者Alex