Vue.js 如何在vue中获取特定类别的产品列表

发布于06月12日

我有一个categoryID以下的产品列表，如何显示每个categoryID以下的产品

这是我的类别id数据:

{
    "success": true,
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    }
}

这是categoryID :的产品数据

{
    "_id": "62567252370e769a8a93a517",
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    },
    "title": "galaxy s10",
}

此my html模板用于显示我的数据

 <div>
    <div id="app">
      <p>{{category.type}}</p>
      <ul>
        <li
          v-for="product in products"
          :key="product._id"
        >
          {{ product.title }}
        </li>
      </ul>
    </div>
  </div>

我得到了{{ category.type }}，但当循环遍历产品时，我从数据库中获得了所有产品，而不是特定categoryID中的产品

如何在每次转到categoryID路由时显示{{ category.type }}以下的产品列表.

推荐答案

试试这个:

new Vue({
  el: '#app',
  data: {
    category: {
      "_id": "62566ec30e42d6c5ab370e7c",
      "products": [],
      "type": "mobile phone",
      "__v": 0
    },
    products: [{
      "_id": "62567252370e769a8a93a517",
      "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
      },
      "title": "galaxy s10"
    }, {
      "_id": "62567252370e769a8a93a517",
      "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
      },
      "title": "One Plus"
    }]
  },
  mounted() {
    const catID = category._id;
    this.products = this.products.filter(({ category }) => catID === category._id);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{category.type}}</p>
  <ul>
    <li v-for="product in products" :key="product._id">
      {{ product.title }}
    </li>
  </ul>
</div>