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.
Then the component is used like this
<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>
<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>
<div>
<Component v-for=“item in list” :commission=“item”/>
</div>
<div>
<Component v-for=“item in list” :commission=“item”/>
</div>
7 replies
Pagination page count not updating
I am trying to change the :total field of my UPagination component and its not updating. Here is my implementation.
<template v-if="transactionsCount > 1">
<div class="mt-2">
<UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>
</div>
</template>
<script setup lang="js">
//The amount of pages with transactions. Max 10 transactions per page.
const transactionsCount = ref(0)
//initially when the page loads, transactionsCount is set to 1 by another function.
//When a user clicks a check box, it loads 30 transactions, so transactionsCount is set to 3. The pagination is not updating.
//Looked at the values in the nuxt dev tools, all the variables are as expected. This just isn't reflecting that.
</script>
<template v-if="transactionsCount > 1">
<div class="mt-2">
<UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>
</div>
</template>
<script setup lang="js">
//The amount of pages with transactions. Max 10 transactions per page.
const transactionsCount = ref(0)
//initially when the page loads, transactionsCount is set to 1 by another function.
//When a user clicks a check box, it loads 30 transactions, so transactionsCount is set to 3. The pagination is not updating.
//Looked at the values in the nuxt dev tools, all the variables are as expected. This just isn't reflecting that.
</script>
8 replies