VueJS 3实现电商式相互依赖产品筛选器问题求助

问题根源 #

1. 第二个筛选区通过v-for="country in myObject"循环渲染，导致生成与分类数量一致的多个select控件
2. 第一个select的value绑定错误，直接绑定了分类对应的子选项数组，而非分类名称，无法正确关联后续逻辑
3. 计算属性逻辑混乱，未实现"选分类显示对应子选项、选子选项反向匹配分类"的联动逻辑

修复后完整代码 #

<script>
export default {
  data() {
    return {
      myObject: {
        Tshirts: ["X", "Y", "Z"],
        Pants: ["A", "B", "C"],
        Coats: ["D", "E"],
      },
      selectedCategory: "All", // 选中的分类，默认"全部"
      selectedSub: "All"       // 选中的子选项，默认"全部"
    };
  },
  computed: {
    // 获取所有分类（包含"全部"）
    allCategories() {
      return ["All", ...Object.keys(this.myObject)];
    },
    // 获取所有子选项（包含"全部"）
    allSubs() {
      const subs = [];
      Object.values(this.myObject).forEach(list => subs.push(...list));
      return ["All", ...new Set(subs)];
    },
    // 根据选中的分类，动态生成可用子选项
    availableSubs() {
      if (this.selectedCategory === "All") {
        return this.allSubs;
      }
      return ["All", ...this.myObject[this.selectedCategory]];
    },
    // 根据选中的子选项，反向匹配可用分类
    availableCategories() {
      if (this.selectedSub === "All") {
        return this.allCategories;
      }
      // 找到包含当前子选项的所有分类
      const matchedCategories = [];
      for (const [category, subs] of Object.entries(this.myObject)) {
        if (subs.includes(this.selectedSub)) {
          matchedCategories.push(category);
        }
      }
      return ["All", ...matchedCategories];
    }
  },
  watch: {
    // 当切换分类时，如果当前子选项不在新的可用列表中，重置为"全部"
    availableSubs(newSubs) {
      if (!newSubs.includes(this.selectedSub)) {
        this.selectedSub = "All";
      }
    },
    // 当切换子选项时，如果当前分类不在新的可用列表中，重置为"全部"
    availableCategories(newCategories) {
      if (!newCategories.includes(this.selectedCategory)) {
        this.selectedCategory = "All";
      }
    }
  }
};
</script>

<template>
  <div>
    <!-- 分类筛选器 -->
    <select v-model="selectedCategory">
      <option v-for="category in availableCategories" :key="category" :value="category">
        {{ category }}
      </option>
    </select>

    <br /><br />

    <!-- 子选项筛选器 -->
    <select v-model="selectedSub">
      <option v-for="sub in availableSubs" :key="sub" :value="sub">
        {{ sub }}
      </option>
    </select>
  </div>
</template>

关键修改说明 #

• 变量命名优化：用更清晰的selectedCategory和selectedSub替代原变量，提升可读性
• 单select控件：移除第二个筛选区的循环，只保留一个select，通过计算属性动态渲染选项
• 双向联动逻辑：
  • 选分类时，子选项列表自动切换为对应分类的选项，选"全部"则显示所有子选项
  • 选子选项时，自动反向匹配所属分类，只显示包含该子选项的分类
• 边界处理：通过watch监听可用选项变化，当切换筛选后原选中项不在新列表中时，自动重置为"全部"

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