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 >
        <ul role="list" >
          <li v-if="products.length" v-for="product in products" :key="product.id" @mouseenter="hover = true" @mouseleave="hover = false"  >
            <div >
              <div >
                <img :src="product.imageSrc" :alt="product.imageAlt"  />
              </div>
              <div   >
                <h3  >
                  <a :href="product.href">
                    <span  />
                    {{ product.name }}
                  </a>
                </h3>
           
                <p >
                  Cheapest At
                </p>
                <p >
                  {{ product.cheapestat }}
                </p>
            
                <p v-if="hover" >
                  <span >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
        
      });
      
    });

CodePudding user response：

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 >
  <ul v-if="products.length" role="list" >
              <!--