My v-for loop is set up to display a single result based on the chosen :key value from the counter data property. Everything is working well, but I am encountering problems when I try to add <transitions> for a smoother update of the value. The issue is that both the old and new items appear briefly and the transition causes them to jump around the page.
It seems like the tag elements are all present in the DOM due to the v-for loop, and they are just transitioning between each other.
Is there a more efficient way to achieve this behavior so that only the {{tag}} values get updated based on the key?
<div v-for="tag in tags" :key="tag.id">
<transition name="fade">
<div v-if="tag.id == counter">
<div class="tag-col--prod-img mb-4">
<img class="img-fluid" :src="tag.thumb" />
</div>
<h5 class="mb-5">{{tag.heading}}</h5>
<div class="mb-3">
<h1>{{ tag.title }}</h1>
</div>
<h2 class="mb-3">{{ tag.price }}</h2>
<p class="mb-4">
{{tag.detail}}
</p>
<a :href="tag.link" target="_blank">
<button class="btn btn-primary">View product</button>
</a>
</div>
</transition>
</div>