Vue实现点击分类传递category_id并按分类展示商品的方法

Got it, let's walk through fixing your code to make the category filtering work as expected—where clicking an Apple or Xiaomi tab shows only their respective products. Here's the breakdown of changes and the final working code:

Step 1: Fix Data Typos & Add State for Selected Category #

First, there's a typo in your category array: the second item uses categoryid instead of category_id—this would prevent us from grabbing the correct ID. We'll also add a currentCategoryId property to track which category is selected (we can default it to the first category's ID for initial load).

Step 2: Update the Toggle Method #

Instead of passing the category name, we'll pass the category_id to the toggle method, so we can store it in our state to use for filtering.

Step 3: Add a Computed Property for Filtered Products #

We'll create a computed property that filters the products array based on the currentCategoryId, so only matching products are displayed.

Final Working Code #

JavaScript #

var vm = new Vue({
  el: '#app',
  data: {
    active: 0,
    currentCategoryId: "1", // Default to first category
    category: [
      { category_id: "1", category_name: "Apple" },
      { category_id: "2", category_name: "Xiaomi" } // Fixed typo here
    ],
    products: [
      { category_id: "1", goods_name: "iphone6s" },
      { category_id: "1", goods_name: "macbook pro" },
      { category_id: "2", goods_name: "hongmi5 Plus" }
    ]
  },
  computed: {
    filteredProducts() {
      // Filter products to match the selected category ID
      return this.products.filter(product => product.category_id === this.currentCategoryId);
    }
  },
  methods: {
    toggle(index, categoryId) {
      this.active = index;
      this.currentCategoryId = categoryId; // Store the selected category ID
    }
  }
})

CSS #

.active {
  color: red;
  border-bottom: 1px solid red;
}
ul li {
  padding: 0 15px;
  float: left;
  list-style: none;
  cursor: pointer; /* Add cursor pointer to indicate clickable tabs */
}
.layui-tab-item {
  margin-top: 10px;
}

HTML #

<div id="app">
  <ul>
    <!-- Pass category_id instead of name to toggle, fix $index to index (Vue 2+ uses (item, index) instead of $index) -->
    <li 
      @click="toggle(index, item.category_id)" 
      v-for="(item, index) in category" 
      :class="{active: active === index}"
    >
      {{ item.category_name }}
    </li>
  </ul>
  <br style="clear: left;"> <!-- Clear float to fix layout overlap -->
  <div class="layui-tab-content">
    <!-- Use computed filteredProducts instead of raw products array -->
    <div class="layui-tab-item" v-for="item in filteredProducts"> 
      {{ item.goods_name }}
    </div>
  </div>
</div>

Key Notes: #

• Vue Version Tip: If you're using Vue 2 or later, $index in v-for is deprecated—we use (item, index) to get the loop index instead.
• Layout Fix: Added a clear float <br> to stop the product content from wrapping under the category tabs.
• Usability Touch: Added cursor: pointer to category tabs so users can tell they're clickable.

Now when you click "Apple", only iPhone 6s and MacBook Pro will show; clicking "Xiaomi" will display Redmi 5 Plus.

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