Hola, soy nuevo en vue y tengo una lista de datos json que tiene una lista de productos en la categoría. ¿Cómo puedo mostrar un producto en cada categoría?
Aquí están mis datos json para la matriz de categorías
{ "_id": "62566ec30e42d6c5ab370e7c", "products": [], "type": "mobile phone", "__v": 0 }mi gama de productos
{ "_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" }mi plantilla html para obtener la lista de categorías en mi base de datos
<div class="container" v-for="category in categories" :value="category._id" :key="category._id"> <span>{{category.type}}</span> </div>mi etiqueta de script
<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>Por favor como filtro los productos y lo consigo en una categoria especifica, estoy perdido
Puede hacer v-for interno de productos para categoría, pasando category._id al método:
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>