NuxtN
Nuxt•11mo ago
BeanFeed

Popover being covered by other components.

I have a component that contains a popover and I am using a v-for loop on the component. When the components are listed out, the ones below the component you click on cover the popover. Here is the component code.

<script setup lang="js">
const props = defineProps({
  commission: Object
})
</script>

<template>
  <div class="bg-gray-200 dark:bg-gray-800 p-2 min-w-min w-full h-min rounded-lg drop-shadow ">
    <div class="flex justify-between items-center">
      <div class="flex space-x-2">
        <div class="w-10 overflow-hidden">
          <p>{{commission.commissionId}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.organization.organizationName}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.quote.toFixed(2)}}</p>
        </div>
        <div class="w-32 overflow-hidden">
          <UPopover class="">
            <UButton label="View Details"/>

            <template #panel>
              <p>{{commission.details}}</p>
            </template>
          </UPopover>

        </div>
      </div>
      <Authorize role="Internal" :permissions="['organization.write']">
        <template #success>
          <UButton @click="openModifyModal" :padded="false" class="h-min px-3 py-2 ml-10 animatedButton">Modify</UButton>
        </template>
      </Authorize>
    </div>
  </div>
</template>

Then the component is used like this

<div>
   <Component v-for=“item in list” :commission=“item”/>
</div>
Was this page helpful?