数组索引不唯一时如何实现Vue/Nuxt手风琴菜单单选效果？

核心解决思路 #

你遇到的问题本质是不同层级分组下的索引重复，无需手动给每个问题加ID，直接利用现有数据的层级键名拼接出唯一标识即可解决。你的questionRows数据从行到分类再到问题，每一层的键名在父级下都是唯一的，把这些键名拼接起来就能得到全局唯一的标识。

具体修改方案 #

1. 模板代码调整 #

不用修改原有JS逻辑，只需要调整模板里的v-for参数、激活判断和点击传参即可：

<!-- 直接遍历整个questionRows，无需分开写row1和row2的重复代码 -->
<div v-for="(row, rowKey) in questionRows" :key="rowKey">
  <div v-for="(category, categoryKey) in row" :key="`${rowKey}-${categoryKey}`">
    <div class="flex items-center mb-3">
      <h3 class="text-blue text-lg font-bold">{{ category.title }}</h3>
    </div>
    <div class="flex flex-col gap-3">
      <!-- 拿到问题层的键名questionKey，拼接行、分类、问题三层的键名得到唯一标识 -->
      <div v-for="(question, questionKey) in category.questions" :key="`${rowKey}-${categoryKey}-${questionKey}`">
        <div :class="{ 'active-class' : isActive === `${rowKey}-${categoryKey}-${questionKey}`}" class="justify-between w-full min-h-min  bg-white rounded-2xl select-none">
          <!-- 点击时传入拼接好的唯一标识 -->
          <div class="cursor-pointer" @click="toggleItem(`${rowKey}-${categoryKey}-${questionKey}`)">
            <div :class="{'pb-5' : isActive !== `${rowKey}-${categoryKey}-${questionKey}`}" class="flex justify-between items-center text-button pt-6 pl-10 pr-7">
              <h3 class="font-bold">{{ question.question }}</h3>
              <font-awesome-icon v-if="isActive === `${rowKey}-${categoryKey}-${questionKey}`" :icon="['fas', 'sort-up']"/>
              <font-awesome-icon v-else :icon="['fas', 'sort-down']"/>
            </div>
          </div>
          <p v-if="isActive === `${rowKey}-${categoryKey}-${questionKey}`" class="mt-3 text-sm text-blue pl-10 pr-7 pb-5">
            {{ question.answer }}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

2. JS逻辑无需修改 #

你原本的toggleItem方法完全可以复用，不需要做任何调整，只需要注意isActive默认值保持null即可。

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