[Vuejs]-Hover effect on only one item out of multiple displayed – VUEJS

by

0👍

✅

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>

Leave a comment