Lapor Posts - Answer Overflow

Lapor

•Created by Lapor on 5/20/2024 in #❓・help

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>

1 replies

Gaming

Programming