Vue实现产品分类独立切换显示问题求助

当前使用单个ref(false)的show变量控制所有带子分类的产品（如socks、shoes）的展开/收起，点击任意一个分类时，所有分类会同时展开或收起。需要实现每个分类独立控制自身的展开/收起状态。

解决方案 #

核心是给每个带子分类的产品单独维护展开状态，而非使用全局单个布尔值。以下是具体修改步骤：

1. 替换全局状态为分类独立状态 #

把单个show变量改成响应式对象，存储每个带子分类产品的展开状态：

<script setup>
import { ref, isObject } from 'vue'

const products = {
  "socks": {
    "socksblack": "/socksblack",
    "sockswhite": "/sockswhite",
  },
  "shirts": "/shirts",
  "bags": "/bags",
  "shoes": {
    "shoes4men": "/shoes4men",
    "shoes4women": "/shoes4women",
  }
}

// 自动生成带子分类产品的初始收起状态
const showStates = ref(
  Object.fromEntries(
    Object.entries(products)
      .filter(([_, product]) => isObject(product))
      .map(([category]) => [category, false])
  )
)

// 切换指定分类的展开状态
const toggleShow = (category) => {
  showStates.value[category] = !showStates.value[category]
}
</script>

2. 修改页面绑定逻辑 #

修改点击事件和显示控制，绑定到对应分类的状态：

<template>
  <div v-for="(product, category) in products" :key="category" class="">
    <!-- 处理带子分类的产品 -->
    <template v-if="isObject(product)">
      <div>
        <!-- 点击时切换当前分类的状态，阻止默认跳转 -->
        <a href="#" @click.prevent="toggleShow(category)">{{ category }}</a>
        <!-- 根据当前分类的状态控制子菜单显示 -->
        <div v-show="showStates[category]">
          <div v-for="(subLink, subName) in product" :key="subName">
            <a :href="subLink">{{ subName }}</a>
          </div>
        </div>
      </div>
    </template>
    <!-- 处理无子女的产品 -->
    <template v-else>
      <a :href="product">{{ category }}</a>
    </template>
  </div>
</template>

关键说明 #

• 用showStates响应式对象替代全局show，每个键对应一个分类，值控制该分类的展开/收起。
• toggleShow函数仅修改当前点击分类的状态，不会影响其他分类。
• @click.prevent阻止默认跳转行为，避免页面刷新导致状态丢失。
• 自动生成showStates的方式，新增带子分类的产品时无需手动修改状态初始化代码。

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