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