Vue 3折叠面板问题求助：点击单个按钮却展开全部面板

你当前的核心问题是两个折叠面板共用了同一个响应式变量isShow，点击任意按钮都会切换这个变量的状态，导致两个面板同步展开/收起。

以下提供两种可行的解决方式，按需选择：

方式1：为每个面板创建独立状态变量 #

直接在当前组件中声明两个独立的响应式变量，分别控制对应面板的显示状态：

<script setup>
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
import { ref } from "vue";

// 为每个面板单独声明状态变量
const isShow1 = ref(false);
const isShow2 = ref(false);
</script>
<template>
  <div class="py-4">
    <div class="relative flex flex-col justify-between w-full h-full bg-white">
      <div class="z-2 flex items-center bottom-[-200px] justify-center">
        <div
          @click="isShow1 = !isShow1"
          class="flex justify-center bg-gray-200 py-1 px-2 text-sm z-50 text-gray-600 cursor-pointer space-x-2"
        >
          <p>VIEW DETAIL</p>
          <ArrowUpBold
            v-if="isShow1"
            aria-hidden="true"
            class="w-4"
            color="rgba(75 85 99)"
          />
          <ArrowDownBold
            v-else
            aria-hidden="true"
            class="w-4"
            color="rgba(156 163 175)"
          />
        </div>
      </div>
      <div class="flex flex-col items-center">
        <Transition name="collapse1">
          <div
            class="w-full overflow-hidden h-auto top-[12px] bg-gray-200"
            v-if="isShow1"
          >
            <h1>Collapse 1</h1>
          </div>
        </Transition>
      </div>
    </div>
  </div>

  <div class="py-4">
    <div class="relative flex flex-col justify-between w-full h-full bg-white">
      <div class="z-2 flex items-center bottom-[-200px] justify-center">
        <div
          @click="isShow2 = !isShow2"
          class="flex justify-center bg-gray-200 py-1 px-2 text-sm z-50 text-gray-600 cursor-pointer space-x-2"
        >
          <p>VIEW DETAIL</p>
          <ArrowUpBold
            v-if="isShow2"
            aria-hidden="true"
            class="w-4"
            color="rgba(75 85 99)"
          />
          <ArrowDownBold
            v-else
            aria-hidden="true"
            class="w-4"
            color="rgba(156 163 175)"
          />
        </div>
      </div>
      <div class="flex flex-col items-center">
        <Transition name="collapse1">
          <div
            class="w-full overflow-hidden h-auto top-[12px] bg-gray-200"
            v-if="isShow2"
          >
            <h1>Collapse 2</h1>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

方式2：封装为可复用的子组件（推荐） #

如果后续需要扩展更多折叠面板，封装子组件会更利于维护和复用：

子组件 CollapseItem.vue #

<script setup>
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
import { ref } from "vue";

const props = defineProps({
  content: {
    type: String,
    required: true
  }
});

const isShow = ref(false);
</script>
<template>
  <div class="py-4">
    <div class="relative flex flex-col justify-between w-full h-full bg-white">
      <div class="z-2 flex items-center bottom-[-200px] justify-center">
        <div
          @click="isShow = !isShow"
          class="flex justify-center bg-gray-200 py-1 px-2 text-sm z-50 text-gray-600 cursor-pointer space-x-2"
        >
          <p>VIEW DETAIL</p>
          <ArrowUpBold
            v-if="isShow"
            aria-hidden="true"
            class="w-4"
            color="rgba(75 85 99)"
          />
          <ArrowDownBold
            v-else
            aria-hidden="true"
            class="w-4"
            color="rgba(156 163 175)"
          />
        </div>
      </div>
      <div class="flex flex-col items-center">
        <Transition name="collapse1">
          <div
            class="w-full overflow-hidden h-auto top-[12px] bg-gray-200"
            v-if="isShow"
          >
            <h1>{{ content }}</h1>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

父组件使用 #

<script setup>
import CollapseItem from './CollapseItem.vue';
</script>
<template>
  <CollapseItem content="Collapse 1" />
  <CollapseItem content="Collapse 2" />
</template>

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