Nuxt•4mo ago

Hide dropdown item

I posted an issue in the UI repo already, but still want to see if anyone would like to discuss it here. Basically I want to hide some item in a dropdown sometimes, but using v-if and v-show would not work. v-if would make the item rendered with default item. v-show would hide the item, but as an empty action in the dropdown. I have two solution right now, but I don't think both of them are good solutions. One is to change the items passed into the element. Another one is having two dropdown, and shows the corresponding one depend on the state. Here's the code snippet I provided in the issue Also here's the issue link https://github.com/nuxt/ui/issues/1803

<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>

<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>

GitHub

Hide item in dropdown · Issue #1803 · nuxt/ui

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....

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Hide dropdown item