Add empty state on productsPage

This commit is contained in:
2024-09-08 19:20:54 +02:00
parent b585ceb81b
commit 3f061f0136

View File

@@ -93,15 +93,11 @@ function filterProducts() {
) )
} }
console.log("1", filteredProducts.value)
if (onlyDiscounts.value) { if (onlyDiscounts.value) {
filteredProducts.value = filteredProducts.value.filter(product => filteredProducts.value = filteredProducts.value.filter(product =>
product.discount > 0 product.discount > 0
) )
} }
console.log("2", filteredProducts.value)
} }
watch(() => selectedCategory.value, () => { filterProducts() }) watch(() => selectedCategory.value, () => { filterProducts() })
@@ -123,11 +119,18 @@ watch(() => onlyDiscounts.value, () => { filterProducts() })
</v-col> </v-col>
</v-row> </v-row>
<v-row dense> <v-row dense>
<v-col v-for="product in filteredProducts" cols="6" lg="4" xl="3"> <v-col v-if="filteredProducts.length > 0" v-for="product in filteredProducts" cols="6" lg="4" xl="3">
<product-card <product-card
:product="product" :product="product"
:category="getCategoryById(product.categoryId)" :category="getCategoryById(product.categoryId)"
/> />
</v-col> </v-col>
<v-col v-else>
<v-empty-state
icon="mdi-magnify"
headline="Keine Artikel gefunden"
/>
</v-col>
</v-row> </v-row>
</template> </template>