Hover effect on only one item out of multiple displayed - VUEJS - firebase

Question

I have put in a mouseenter and mouseleave on the li tag that i want when a person hovers over it, it will display the price on product.price. However, when i hover over it, it will display the price for all 6 rendered data instead of just the 1 its hovered on. I only want it to display pricing on the specific item its hovered on and not all. The data is being loaded from firebase. Please see below template code and image here for reference.
<div class="relative w-full pb-6 -mb-6 overflow-x-auto scrollbar-hide">
<ul role="list" class="mx-4 inline-flex space-x-0 gap-2 sm:mx-6 lg:mx-0 lg:space-x-0 lg:grid lg:grid-cols-6 lg:gap-x-4">
<li v-if="products.length" v-for="product in products" :key="product.id" #mouseenter="hover = true" #mouseleave="hover = false" class="w-44 inline-flex border hover:border-black rounded-lg p-4 lg:w-auto">
<div class="group relative">
<div class="w-[70%] lg:w-[55%] bg-gray-white overflow-hidden">
<img :src="product.imageSrc" :alt="product.imageAlt" class="w-full h-20 overflow-hidden object-center object-contain" />
</div>
<div class="mt-2">
<h3 class="mt-1 font-rubikreg h-11 overflow-hidden text-xs lg:text-base uppercase text-gray-900">
<a :href="product.href">
<span class="absolute inset-0" />
{{ product.name }}
</a>
</h3>
<p class="mt-3 lg:mt-6 font-rubiklight uppercase text-xs lg:text-sm text-gray-900">
Cheapest At
</p>
<p class="mt-1 font-rubikreg underline-offset-2 underline uppercase text-xs lg:text-sm text-gray-900">
{{ product.cheapestat }}
</p>
<p v-if="hover" class="mt-5 text-2xl uppercase font-rubik text-gray-900">
<span class="text-xs">From</span>
A${{ product.price }}
</p>
</div>
</div>
</li>
</ul>
</div>
script code on firebase data
setup() {
onMounted(() => {
onSnapshot(collection(db, "malesneakers") , (querySnapshot) => {
const maleProducts = [];
querySnapshot.forEach((doc) => {
const mlproducts = {
id: doc.id,
imageSrc: doc.data().imageSrc,
name: doc.data().name,
price: doc.data().price,
cheapestat: doc.data().cheapestat,
svgSrc: doc.data().svgSrc,
href: doc.data().href,
}
maleProducts.push(mlproducts)
});
products.value = maleProducts
});
});

Answer 1

Try with product.id instead of boolean for hover variable:
const { ref } = Vue
const app = Vue.createApp({
setup() {
const products = ref([{id: 1, name: 'aaa', href: '#', cheapestat: 5, price: 7}, {id: 2, name: 'bbb', href: '#', cheapestat: 5, price: 5}])
const hover = ref(null)
return {
products, hover
};
},
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div class="relative w-full pb-6 -mb-6 overflow-x-auto scrollbar-hide">
<ul v-if="products.length" role="list" class="mx-4 inline-flex space-x-0 gap-2 sm:mx-6 lg:mx-0 lg:space-x-0 lg:grid lg:grid-cols-6 lg:gap-x-4">
<!-- 👇 here you set hover to product.id -->
<li v-for="product in products" :key="product.id"
#mouseenter="hover = product.id" #mouseleave="hover = null" class="w-44 inline-flex border hover:border-black rounded-lg p-4 lg:w-auto">
<div class="group relative">
<div class="w-[70%] lg:w-[55%] bg-gray-white overflow-hidden">
<img :src="product.imageSrc" :alt="product.imageAlt" class="w-full h-20 overflow-hidden object-center object-contain" />
</div>
<div class="mt-2">
<h3 class="mt-1 font-rubikreg h-11 overflow-hidden text-xs lg:text-base uppercase text-gray-900">
<a :href="product.href">
<span class="absolute inset-0" />
{{ product.name }}
</a>
</h3>
<p class="mt-3 lg:mt-6 font-rubiklight uppercase text-xs lg:text-sm text-gray-900">
Cheapest At
</p>
<p class="mt-1 font-rubikreg underline-offset-2 underline uppercase text-xs lg:text-sm text-gray-900">
{{ product.cheapestat }}
</p>
<!-- 👇 here you check hover for product.id -->
<p v-if="hover === product.id" class="mt-5 text-2xl uppercase font-rubik text-gray-900">
<span class="text-xs">From</span>
A${{ product.price }}
</p>
</div>
</div>
</li>
</ul>
</div>
</div>