I need to conditionally display a div inside a card that slides within a carousel. My current approach is to check if the ancestor element contains the active class, and then use v-if to decide whether it should be rendered or not. However, this method does not seem to be working as expected. I am still new to working with VUE, so any suggestions would be greatly appreciated.
<vue-glide-slide v-for="(offer,index) in offers" :key="index" ref="offerElement">
<div class="card">
<img :src="offer.icon" class="card-img-top offer-image" :alt="offer.title" />
<div class="card-body mb-5">
<h5 class="card-title px-3">{{offer.title}}</h5>
<div v-if="this.parentElement.parentElement.parentElement.classList.contains('glide__slide--active')">
<p class="card-text">{{offer.description}}</p>
<button
class="btn btn-main btn-home"
type="button"
@click="displayIfActive"
>View details</button>
</div>
</div>
</div>
</vue-glide-slide>