Vue如何实现按分类筛选属性并渲染为复选框列表

DevOps 小满

2026-9-25

你现有代码的核心问题是假设categories数组的每个元素下已经嵌套了对应属性数据，但根据你的描述，API返回的categories和attributes是两个独立数据集，attributes通过自身的category_id字段关联对应分类的id，所以直接遍历category.attributes无法拿到匹配的属性列表。

实现方案（推荐提前组装数据，性能更优）

第一步：在计算属性中组装嵌套结构

在Vue的computed中提前把分类和对应属性做关联，避免模板内重复计算：

export default {
  data() {
    return {
      // 接口返回的分类列表
      categories: [],
      // 接口返回的全量属性列表
      attributes: [],
      // 存储选中的属性ID，用于复选框绑定
      selectedAttrs: []
    }
  },
  computed: {
    nestedCategories() {
      return this.categories.map(category => {
        // 筛选出当前分类对应的所有属性
        const matchedAttrs = this.attributes.filter(attr => attr.category_id === category.id)
        return {
          ...category,
          attributes: matchedAttrs
        }
      })
    }
  }
}

第二步：修改模板渲染逻辑，替换为复选框

<ul>
  <li v-for="category in nestedCategories" :key="category.id">
    <h3>{{ category.name }}</h3>
    <div v-for="attr in category.attributes" :key="attr.id">
      <label>
        <input type="checkbox" :value="attr.id" v-model="selectedAttrs">
        {{ attr.attribute_name }}
      </label>
    </div>
  </li>
</ul>

轻量方案（数据量小时可用）

如果你的分类和属性数据量很小，也可以直接在模板内做筛选，无需提前组装数据：

<ul>
  <li v-for="category in categories" :key="category.id">
    <h3>{{ category.name }}</h3>
    <div v-for="attr in attributes.filter(item => item.category_id === category.id)" :key="attr.id">
      <label>
        <input type="checkbox" :value="attr.id" v-model="selectedAttrs">
        {{ attr.attribute_name }}
      </label>
    </div>
  </li>
</ul>