I’m trying to build a product card carousel using vue-owl-carousel. One feature I would like this carousel to have is when a button is pressed, the matching tags will only appear in the carousel filtering out the others (as shown in image) [1]: https://i.stack.imgur.com/wkYds.png
The filter is working, however, the carousel will replace the filtered out cards with blank space as if the filtered out cards were still there. Any way to fix this?
** template **
<template>
<div >
<button type="button" v-for="(c,i) in tags" :key="i" class="btn btn-outline-primary" @click="onClick(c)">{{c}}</button>
<carousel :items="3" :margin="10" :nav="true">
<div class="card" v-for="c in filterProducts" :key="c.name" style="width: 18rem;">
<img :src="require('../assets/img/' + c.imgName + '.png')">
<h5 class="card-title ps-2 pt-2">{{c.headline}}</h5>
<div class="card-body">
<p class="card-text">by {{c.text}}</p>
<h6 class="card-text fw-bold fs-2">{{c.price}}</h6>
<button class="btn btn-outline-secondary rounded-pill">View Details</button>
</div>
</div>
</carousel>
</div>
</template>
JS
<script>
import carousel from "vue-owl-carousel"
export default {
components:{carousel},
data(){
return{
tags:["business","blog","e-commerce"],
cards:[{
imgName: "homepage-design-hotjar",
headline:"Business Template ",
text:"Bozo",
price: "$12.99"
},
{
imgName: "homepage-design-qwilr",
headline:"Fashion template",
text:"Bozo",
price: "$12.99",
tag:"business"
},
{
imgName: "homepage-design-usabilityhub",
headline:"Game template",
text:"Bozo",
price: "$20.99",
tag:"business",
},
{
imgName: "skateboard",
headline:"Game template",
text:"Tony Hawk",
price: "$100.99",
tag:"blog"
},
{imgName: "skateboard",
headline:"Game template",
text:"Tony Hawk",
price: "$100.99",
tag:"blog"
},
{
imgName: "skateboard",
headline:"Game template",
text:"Tony Hawk",
price: "$100.99",
tag:"e-commerce"
},
],
filterBy: "",
}
},
computed:{
filterProducts(){
if (this.filterBy === "") return this.cards;
else return this.cards.filter(c => c.tag === this.filterBy)
}
},
methods: {
onClick(tag) {
this.filterBy = tag
},
}
}
</script>