如何实现点击品牌按钮从JSON数组中筛选对应商品卡片？

核心问题梳理 #

你当前代码存在两个关键问题：

• 商品数据的brand字段值（示例里的9）和品牌数据的id（1、2）不匹配，需先确保两者关联值一致才能正常过滤
• 缺少品牌按钮点击后的过滤逻辑，以及跟踪选中品牌的状态

具体实现步骤 #

1. 添加状态变量
   在data中新增selectedBrandId，用于记录当前选中的品牌ID，初始值设为null代表显示全部商品：

data: () => ({
  brand,
  items,
  selectedBrandId: null // 跟踪选中的品牌ID
}),

2. 修改品牌按钮的点击事件
   给每个品牌按钮传递当前品牌的ID，同时可添加选中样式区分状态：

<div class="nav">
  <span class="w-full my-4" @click="selectedBrandId = null">All brands</span>
  <hr />
  <div 
    class="btn" 
    v-for="(item, id) in brand" 
    :key="id" 
    @click="selectedBrandId = item.id"
    :class="{ active: selectedBrandId === item.id }" // 可选：选中状态样式
  >
    {{ item.title }}
  </div>
</div>

3. 通过计算属性实现实时过滤
   添加计算属性filteredItems，根据selectedBrandId自动过滤商品列表：

computed: {
  filteredItems() {
    // 未选中品牌时返回全部商品
    if (!this.selectedBrandId) return this.items;
    // 匹配商品的brand字段与选中的品牌ID
    return this.items.filter(item => item.brand === this.selectedBrandId);
  }
}

4. 修改商品列表渲染源
   把原循环的items替换为过滤后的filteredItems：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3" v-for="(item, id) in filteredItems" :key="id">
      <img :src="item.image" class="rounded mx-auto d-block"> <!-- 修正：使用商品自身图片 -->
      <br> {{ item.title }} <br> brand {{ item.brand }} <br> ${{ item.regular_price.value }}
      <div class="btn me-md-2" @click="$emit('addToCart', item)">Add to cart</div> <!-- 修正：传递当前商品 -->
    </div>
  </div>
</div>

额外修正点 #

• 商品图片应使用item.image而非固定的./logo.png，确保显示对应商品的图片
• 加入购物车事件需传递当前商品item，而非未定义的value

完整修改后代码 #

<template>
  <div>
    <div class="nav">
      <span class="w-full my-4" @click="selectedBrandId = null">All brands</span>
      <hr />
      <div 
        class="btn" 
        v-for="(item, id) in brand" 
        :key="id" 
        @click="selectedBrandId = item.id"
        :class="{ active: selectedBrandId === item.id }"
      >
        {{ item.title }}
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3" v-for="(item, id) in filteredItems" :key="id">
          <img :src="item.image" class="rounded mx-auto d-block">
          <br> {{ item.title }} <br> brand {{ item.brand }} <br> ${{ item.regular_price.value }}
          <div class="btn me-md-2" @click="$emit('addToCart', item)">Add to cart</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import brand from '@/components/brand.json';
import items from '@/components/items.json';

export default {
  name: "App",
  data: () => ({
    brand,
    items,
    selectedBrandId: null
  }),
  computed: {
    filteredItems() {
      if (!this.selectedBrandId) return this.items;
      return this.items.filter(item => item.brand === this.selectedBrandId);
    }
  }
}
</script>

<style scoped>
/* 可选：选中品牌按钮的样式 */
.btn.active {
  background-color: #007bff;
  color: white;
}
</style>

内容的提问来源于stack exchange，提问作者Евгений Худак