Nuxt•4w ago

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:

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>

6 Replies

kapa.ai•4w ago

Hi @Medim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To conditionally render items in a dropdown using Nuxt UI (Nuxt UI v2), you should dynamically generate the items array based on your conditions. In your case, you want to hide certain buttons for users on a "trial" account. The Nuxt UI DropdownMenu (UDropdownMenu) component expects an array of items, and you can use JavaScript logic to include or exclude items as needed. For example, you can filter or map your items array based on the user's status before passing it to the dropdown. Here's how you can do it, following the pattern from the official documentation:

const trialDropdownItems = (companyRow: Company) => {
  const items = [];

  // Always show "Remover"
  items.push({
    label: "Remover",
    icon: "i-mingcute-delete-2-line",
    onSelect: () => {
      selectedCompanyId.value = companyRow.id;
      isRemoveCompanyTrialModalOpen.value = true;
    },
  });

  // Only show "Estender" if not on trial
  if (!companyRow.isTrial) {
    items.push({
      label: "Estender",
      icon: "i-mingcute-add-line",
      onSelect: () => {
        selectedCompanyId.value = companyRow.id;
        isExtendCompanyTrialModalOpen.value = true;
      },
    });
  }

  return [items]; // Return as array of arrays for grouped items
};

const trialDropdownItems = (companyRow: Company) => {
  const items = [];

  // Always show "Remover"
  items.push({
    label: "Remover",
    icon: "i-mingcute-delete-2-line",
    onSelect: () => {
      selectedCompanyId.value = companyRow.id;
      isRemoveCompanyTrialModalOpen.value = true;
    },
  });

  // Only show "Estender" if not on trial
  if (!companyRow.isTrial) {
    items.push({
      label: "Estender",
      icon: "i-mingcute-add-line",
      onSelect: () => {
        selectedCompanyId.value = companyRow.id;
        isExtendCompanyTrialModalOpen.value = true;
      },
    });
  }

  return [items]; // Return as array of arrays for grouped items
};

And in your template:

<UDropdownMenu
  v-if="row.isTrial !== null"
  :items="trialDropdownItems(row)"
  :ui="{ content: 'w-48' }"
>
  <UButton
    color="gray"
    label="Período de teste"
    :leading-icon="'i-mingcute-calendar-2-line'"
    trailing-icon="i-heroicons-chevron-down-20-solid"
  />
</UDropdownMenu>

<UDropdownMenu
  v-if="row.isTrial !== null"
  :items="trialDropdownItems(row)"
  :ui="{ content: 'w-48' }"
>
  <UButton
    color="gray"
    label="Período de teste"
    :leading-icon="'i-mingcute-calendar-2-line'"
    trailing-icon="i-heroicons-chevron-down-20-solid"
  />
</UDropdownMenu>

Key points: - Build your items array conditionally in your function. - Use the onSelect property for actions (not click). - Return an array of arrays if you want grouped items. - Pass the computed items to the :items prop of UDropdownMenu. This approach is consistent with the official Nuxt UI documentation, which shows how to dynamically generate dropdown items and control their properties based on your application's state or logic. For more details, see the DropdownMenu items documentation. If you need to hide or show items based on more complex conditions, simply adjust your logic inside the function that returns the items array.

Note: The component in your code is named UDropdown, but the official Nuxt UI component is UDropdownMenu. Make sure you are using the correct component as per the documentation.

DropdownMenu Items ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@229706675936821249> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

johntanzer•4w ago

Hey @Medim if solved do you mind marking it as solved. ❤️

MedimOP•4w ago

@kapa.ai doesn't it need to be a computed? the trialDropdownItems

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, it is not strictly required for your trialDropdownItems function to return a computed property. You can return a plain array or an array of arrays, as shown in the official Nuxt UI documentation. However, using a computed property is recommended if you want to ensure reactivity—especially when the checked state or other properties of the items depend on reactive variables. For example, in the DropdownMenu with checkbox items example, the items array is wrapped in a computed to ensure that changes to the underlying reactive variables (like showBookmarks) are reflected in the menu:

const items = computed(() => [{
  label: 'Show Bookmarks',
  type: 'checkbox',
  checked: showBookmarks.value,
  onUpdateChecked(checked: boolean) {
    showBookmarks.value = checked
  }
  // ...
}])

const items = computed(() => [{
  label: 'Show Bookmarks',
  type: 'checkbox',
  checked: showBookmarks.value,
  onUpdateChecked(checked: boolean) {
    showBookmarks.value = checked
  }
  // ...
}])

If your dropdown items depend on reactive state (such as selectedCompanyId or row), using a computed property will ensure the dropdown updates automatically when those values change. If your items are static or only depend on the function argument, a plain function is sufficient. Summary:
- Use a computed property if your items depend on reactive state and you want automatic updates. - A plain function is fine if your items are static or only depend on the function argument. DropdownMenu with checkbox items ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@229706675936821249> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Conditionally render items on Dropdown (Nuxt UI v2)

Did you find this page helpful?