N
Nuxt•3d ago
WiFi Plug

nuxt ui dropdownmenu how to make clicking an option do something

hi im using nuxt ui dropdownmenu and i display some options inside like delete message etc how do i make it when i click that delete message that something actually happens. i tried a few methods but i's not firing anything for me
5 Replies
kapa.ai
kapa.ai•3d ago
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make an option in a Nuxt UI <UDropdownMenu> perform an action when clicked (like "Delete message"), you should use the onSelect property on the corresponding item in your items array. The onSelect function will be called when that menu item is selected. Here’s a minimal example: 
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'

function handleDelete() {
  // Your delete logic here
  alert('Delete action triggered!')
}

const items: DropdownMenuItem[] = [
  {
    label: 'Delete message',
    icon: 'i-lucide-trash',
    color: 'error',
    onSelect: handleDelete
  }
]
</script>

<template>
  <UDropdownMenu :items="items">
    <UButton label="Open Menu" />
  </UDropdownMenu>
</template>
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'

function handleDelete() {
  // Your delete logic here
  alert('Delete action triggered!')
}

const items: DropdownMenuItem[] = [
  {
    label: 'Delete message',
    icon: 'i-lucide-trash',
    color: 'error',
    onSelect: handleDelete
  }
]
</script>

<template>
  <UDropdownMenu :items="items">
    <UButton label="Open Menu" />
  </UDropdownMenu>
</template>
Key points: - Add an onSelect function to your menu item. - The function will be called when the item is clicked. If you want to prevent the default menu behavior (like closing the menu), you can call e.preventDefault() inside your onSelect handler, as shown in the official docs: 
{
  label: 'Delete message',
  onSelect(e: Event) {
    e.preventDefault()
    // Your logic here
  }
}
{
  label: 'Delete message',
  onSelect(e: Event) {
    e.preventDefault()
    // Your logic here
  }
}
This approach is demonstrated in the documentation and is the recommended way to handle actions for dropdown menu items in Nuxt UI DropdownMenu Items With Checkbox Items Example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
WiFi Plug
WiFi PlugOP•3d ago
@kapa.ai thanks that worked. btw how do i add a button to a text area that appears when you type some text. i used the trailing thingy to add a button but firstly it's not centered and also the text ends up going underneath it
kapa.ai
kapa.ai•3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- To add a button to a Nuxt UI <UTextarea> that appears when you type text, you can use the #trailing slot. However, as you've noticed, the default styling may cause the button to not be vertically centered and the text to go underneath the button. According to the Nuxt UI documentation, the trailing slot is positioned absolutely (absolute end-0 flex items-start), and the textarea itself has full width. This can cause the text to go under the button if the textarea doesn't have enough right padding. To fix this: - Add extra right padding to the textarea using the ui prop, specifically the base class, to ensure the text doesn't go under the button. - Adjust the vertical alignment of your button if needed. Here’s an example: 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <UTextarea
    v-model="value"
    :ui="{ base: 'pr-10' }" <!-- Add enough right padding for your button -->
    placeholder="Type something..."
  >
    <template v-if="value?.length" #trailing>
      <UButton
        icon="i-lucide-x"
        size="xs"
        color="neutral"
        variant="link"
        class="my-auto" <!-- Vertically center the button -->
        @click="value = ''"
        aria-label="Clear"
      />
    </template>
  </UTextarea>
</template>
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <UTextarea
    v-model="value"
    :ui="{ base: 'pr-10' }" <!-- Add enough right padding for your button -->
    placeholder="Type something..."
  >
    <template v-if="value?.length" #trailing>
      <UButton
        icon="i-lucide-x"
        size="xs"
        color="neutral"
        variant="link"
        class="my-auto" <!-- Vertically center the button -->
        @click="value = ''"
        aria-label="Clear"
      />
    </template>
  </UTextarea>
</template>
- The :ui="{ base: 'pr-10' }" adds right padding so the text doesn't go under the button. - The class="my-auto" on the button helps center it vertically. You can adjust the padding value (pr-10) and button size as needed for your design. This approach is consistent with the slot and theming structure described in the documentation for <UTextarea> Textarea Theme and the use of slots for custom trailing content Textarea Usage. If you need more advanced control, you can further customize the slot classes via the ui prop as described in the theme section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?