如何在vue js中获取类别下的产品列表

Question

你好我是 vue 的新手，我有一个 json 数据列表，其中有一个类别下的产品列表，请问如何在每个类别下显示一个产品
这是我的 json 类别数组

的数据

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

我的产品数组

{
    "_id": "625671db370e769a8a93a510",
    "reviews": [],
    "owner": {
        "_id": "6220db7ee861f3dbbaf21e3d",
        "name": "mr jacob",
        "about": "hello",
        "__v": 0
    },
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    },
    "title": "galaxy s21",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.",
    "photo": "https://ajibade.s3.amazonaws.com/1649832365317",
    "price": 500,
    "stockQuantity": 1,
    "__v": 0,
    "id": "625671db370e769a8a93a510"
}

我的 html 模板获取我数据库中的类别列表

<div class="container" v-for="category in categories" :value="category._id" :key="category._id">
      <span>{{category.type}}</span>
    </div>

我的脚本标签

<script>
export default {
  name: "Products",
  name: "categories",
  data() {
    return {
      categoryID: null,
      categories: [],
      products: [],
     
    };
  },

 
  mounted() {
    axios.get("http://localhost:5000/api/products").then(res => {
      console.log(res);

      this.products = res.data.products;
    });
    axios.get("http://localhost:5000/api/categories").then(res => {
      console.log(res);

      this.categories = res.data.categories;
    });
  }
};
</script>

请问如何过滤产品并将其放在特定类别下，我迷路了

Answer 1

您可以为类别制作内部 v-for 个产品，将 category._id 传递给方法：

new Vue({
  el: "#demo",
  data() {
    return {
      categoryID: null,
      categories: [],
      products: [],
      show: null
    };
  },
  methods: {
    productsForCat(cat) {
      return this.products.filter(p => p.category._id === cat)
    },
    displayProd(id) {
      this.show === id ? this.show = null : this.show = id
    }
  },
  mounted() {
    /*axios.get("http://localhost:5000/api/products").then(res => {
      console.log(res);
      this.products = res.data.products;*/
    //});
    this.products = [
          {"_id": "625671db370e769a8a93a510", "reviews": [], "owner": {"_id": "6220db7ee861f3dbbaf21e3d", "name": "mr jacob", "about": "hello", "__v": 0}, "category": {"_id": "62566ec30e42d6c5ab370e7c", "products": [], "type": "mobile phone", "__v": 0}, "title": "galaxy s21", "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.", "photo": "https://ajibade.s3.amazonaws.com/1649832365317", "price": 500, "stockQuantity": 1, "__v": 0, "id": "625671db370e769a8a93a510"},
          {"_id": "625671db370e769a8a93a511", "reviews": [], "owner": {"_id": "6220db7ee861f3dbbaf21e3d", "name": "mr jacob", "about": "hello", "__v": 0}, "category": {"_id": "62566ec30e42d6c5ab370e7d", "products": [], "type": "mobile phone", "__v": 0}, "title": "galaxy", "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.", "photo": "https://ajibade.s3.amazonaws.com/1649832365317", "price": 500, "stockQuantity": 1, "__v": 0, "id": "625671db370e769a8a93a510"}
        ]
    /*axios.get("http://localhost:5000/api/categories").then(res => {
      console.log(res);
      this.categories = res.data.categories;*/
    //});
    this.categories = [
        {"_id": "62566ec30e42d6c5ab370e7c", "products": [], "type": "mobile phone", "__v": 0}, {"_id": "62566ec30e42d6c5ab370e7d", "products": [], "type": "phone", "__v": 0}
      ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container" v-for="category in categories" :key="category._id">
    <span @click="displayProd(category._id)">{{category.type}}</span>
    <div v-if="category._id === show">
      <li v-for="product in productsForCat(category._id)" :key="product._id">
        {{ product.title }}
      </li>
    </div>
  </div>
</div>

如何在vue js中获取类别下的产品列表

how to get list of product under category in vue js

javascript

json

vue.js

vuejs2

vuejs3