Hide item in dropdown

[laporchen]

Description

Description

I have a logic in my dropdown menu to hide certain item. But I can't find a property in this component that can do this. And v-if and v-show do not solve the issue here.

Using v-if would make it rendered as a default item. Wrapping the item in template with v-show would cause an empty item being shown.

The only solution I think of right now is to modify the items passed into the dropdown component. I want to know if there's a way to do this without touching the items being passed in.

<UDropdown :items="items">
  <!-- item login would be rendered as 'Default items slot' if user is false` -->
  <template #login>
    <div
      v-if="!user"
    >
      Login
    </div>
  </template>
  <!-- item user would be an empty item if user is false -->
  <template #user>
    <div
      v-show="!user"
    >
      Login
    </div>
  </template>
  <template #item>
    Default items slot
  </template>
</UDropdown>

[noook]

As of now I'm not aware of an option to not show an item. I think as you said, your best option would be to filter out those items through a computed property or assignment before passing the items to your dropdown

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team