如何根據Vue js中的數組唯一ID在選擇選項中顯示數據

Question

在我的 vue 組件中，我有兩個名為 category 和 product 的數組，它們來自數據庫。 category 數組是一個對象數組，就像它有 id、type、name、value 一樣，products 數組也有 id、type、name、parent_id、value。 產品中的 parent_id 是類別的 id。 我想根據選擇選項中的類別顯示產品。 例如，如果類別 A 則產品將是 B、C、D 或如果類別 B 則產品將是 X、Y、Z。 我怎樣才能做到這一點？

Answer 1

第 1 步：使用select選項創建一個html模板

 <template>
  <div id="app">
    <div class="row">
      <label>Category </label>
      <select @change="onChangeCategory" v-model="selectedCategory">
        <option value="">Select Category</option>
        <option
          v-for="(category, index) in categories"
          :key="index"
          :value="category">
          {{ category.name }}
        </option>
      </select>
    </div>
    <div class="row">
      <label>Product </label>
      <select v-model="selectedProduct">
        <option value="">Select Product</option>
        <option
          v-for="(product, index) in filteredProducts"
          :key="index"
          :value="product">
          {{ product.name }}
        </option>
      </select>
    </div>
    <p v-if="selectedCategory">Selected Category {{ selectedCategory }}</p>
    <p v-if="selectedProduct">Selected Product {{ selectedProduct }}</p>
  </div>
</template>

步驟 2：創建模型data

data() {
  return {
    selectedCategory: "",
    selectedProduct: "",
    filteredProducts: [],
    categories: [
      {
        id: 1,
        type: "Food",
        name: "Food",
        value: "Food",
      },
      {
        id: 2,
        type: "Drinks",
        name: "Drinks",
        value: "Drinks",
      },
    ],
    products: [
      {
        id: 1,
        type: "Food",
        name: "Chiken 65",
        parent_id: 1,
        value: "001",
      },
      {
        id: 2,
        type: "Food",
        name: "Magie",
        parent_id: 1,
        value: "002",
      },
      {
        id: 3,
        type: "Food",
        name: "Mutton Roast",
        parent_id: 1,
        value: "003",
      },
      {
        id: 4,
        type: "Drinks",
        name: "Pepsi",
        parent_id: 2,
        value: "004",
      },
      {
        id: 5,
        type: "Drinks",
        name: "Beer",
        parent_id: 2,
        value: "005",
      },
      {
        id: 6,
        type: "Drinks",
        name: "7Up",
        parent_id: 2,
        value: "006",
      },
    ],
  };
},

第 3 步：為類別添加onChange事件

methods: {
  onChangeCategory() {
    this.selectedProduct = "";
    this.filteredProducts = this.products.filter((item) => {
      return item.parent_id === this.selectedCategory.id;
    });
  },
},

演示