Conditionally render items on Dropdown (Nuxt UI v2)
As the title says, how can one conditionally render items on a dropdown?
I got some users that are on a "trial" account and want to hide some buttons.
Code:
on component:
I got some users that are on a "trial" account and want to hide some buttons.
Code:
const trialDropdownItems = (companyRow: Company) => [
[
{
label: "Remover",
icon: "i-mingcute-delete-2-line",
click: () => {
selectedCompanyId.value = companyRow.id;
isRemoveCompanyTrialModalOpen.value = true;
},
},
{
label: "Estender",
icon: "i-mingcute-add-line",
click: () => {
selectedCompanyId.value = companyRow.id;
isExtendCompanyTrialModalOpen.value = true;
},
},
],
];const trialDropdownItems = (companyRow: Company) => [
[
{
label: "Remover",
icon: "i-mingcute-delete-2-line",
click: () => {
selectedCompanyId.value = companyRow.id;
isRemoveCompanyTrialModalOpen.value = true;
},
},
{
label: "Estender",
icon: "i-mingcute-add-line",
click: () => {
selectedCompanyId.value = companyRow.id;
isExtendCompanyTrialModalOpen.value = true;
},
},
],
];on component:
<UDropdown
v-if="row.isTrial !== null"
:items="trialDropdownItems(row)"
mode="hover"
:popper="{ placement: 'bottom-start' }"
>
<UButton
color="gray"
label="Período de teste"
:leading-icon="'i-mingcute-calendar-2-line'"
trailing-icon="i-heroicons-chevron-down-20-solid"
/>
</UDropdown> <UDropdown
v-if="row.isTrial !== null"
:items="trialDropdownItems(row)"
mode="hover"
:popper="{ placement: 'bottom-start' }"
>
<UButton
color="gray"
label="Período de teste"
:leading-icon="'i-mingcute-calendar-2-line'"
trailing-icon="i-heroicons-chevron-down-20-solid"
/>
</UDropdown>
