0
I have a component that displays products and I have an H2 where I display the category name. The problem is that the names of the repeated categories appear, since two products belong to the same category. I would like to display the title "Category 1" and after that the products, without repeating the "Category 1" again for product 2.
Array Categories:
{
id: 1,
name: Categoria 1,
}
Array Products:
{
id: 10
name: Produto 1,
category_id: 1
},
{
id: 11,
name: Produto 2,
category_id: 1
}
Component:
<template>
<div>
<div v-for="product in products" :key="product.id">
<h2 class="text-danger font-weight-bold mt-3" v-for="category in categories" :key="category.id" :value="category.id" v-if="category.id === product.category_id">{{ category.name }}</h2>
<div class="row">
<div class="col-12 col-md-4">
<div class="card mb-3">
<a href="" data-toggle="modal" data-target="#product-modal">
<div class="card-body">
<h3 class="text-danger font-weight-bold">{{ product.name }}</h3>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CategoryProduct",
data() {
return {
categories: [],
products: []
}
},
methods: {
getCategories() {
axios
.get('/api/categories')
.then(response => {
this.categories = response.data;
})
.catch(error => console.log(error));
},
getProducts() {
axios
.get('/api/products')
.then(response => {
this.products = response.data;
})
.catch(error => console.log(error));
}
},
mounted() {
this.getCategories();
this.getProducts();
}
}
</script>
Give an example of what the objects inside are like
categories
, you want to group them bycategory.name
? - It is preferable to create an example only with the code needed to reproduce the problem, your question has excess code. - [Ask]– Renan Gomes
I reduced the code and put the example. I want to group by the category name.
– Marcelo