N
Nuxt•3mo ago
melonpansalonpas

UTable with action row to open UModal

I am currently using nuxtUI and tailwind, I have a UTable and I added the row action ability to my table. I want the action to open a UModal when clicked but nothing happened, i tried adding a toast to see if the button even works and the toast appeared but the UModal does not. in my script:= function getRowItems(row: Row<inventoryProduct>) { return [ { type: "label", label: "Actions", }, { label: "Edit", onSelect() { toast.add({ title: "Payment ID copied to clipboard!", color: "success", icon: "i-lucide-circle-check", }); handleEdit(row.original); }, } ]; } const handleEdit = (item: inventoryProduct) => { selectedItem.value = item; editForm.value = { serialNumber: item.serialNumber, itemName: item.itemName, invoiceNumber: item.invoiceNumber, statusAvailability: item.statusAvailability "", stockInDate: item.stockInDate, nextADate: item.nextADate "", }; showEditModal.value = true; }; in my template:= <UModal v-model="showEditModal"> <template #body> <div class="p-4"> <h3>Edit Modal Test</h3> <p>If you see this, the modal is working!</p> <button @click="showEditModal = false">Close</button> </div> </template> </UModal> i tried to display a simple modal first as a test
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @melonpansalonpas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your approach is almost correct, but there are a few important details to ensure that the modal opens as expected with Nuxt UI's UModal: 1. Use the Correct v-model Binding
In Nuxt UI 3, the modal's open state should be controlled using v-model:open instead of just v-model. This is a breaking change from previous versions and is required for the modal to react to your state variable properly [Modal Control Open State]. 2. Component Structure
Make sure your showEditModal is a ref and is reactive in your setup. Example Fix: 
<script setup lang="ts">
import { ref } from 'vue'

const showEditModal = ref(false)

// ... your other code

const handleEdit = (item: inventoryProduct) => {
  selectedItem.value = item
  editForm.value = {
    serialNumber: item.serialNumber,
    itemName: item.itemName,
    invoiceNumber: item.invoiceNumber,
    statusAvailability: item.statusAvailability || "",
    stockInDate: item.stockInDate,
    nextADate: item.nextADate || "",
  }
  showEditModal.value = true
}
</script>

<template>
  <UModal v-model:open="showEditModal">
    <template #body>
      <div class="p-4">
        <h3>Edit Modal Test</h3>
        <p>If you see this, the modal is working!</p>
        <button @click="showEditModal = false">Close</button>
      </div>
    </template>
  </UModal>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const showEditModal = ref(false)

// ... your other code

const handleEdit = (item: inventoryProduct) => {
  selectedItem.value = item
  editForm.value = {
    serialNumber: item.serialNumber,
    itemName: item.itemName,
    invoiceNumber: item.invoiceNumber,
    statusAvailability: item.statusAvailability || "",
    stockInDate: item.stockInDate,
    nextADate: item.nextADate || "",
  }
  showEditModal.value = true
}
</script>

<template>
  <UModal v-model:open="showEditModal">
    <template #body>
      <div class="p-4">
        <h3>Edit Modal Test</h3>
        <p>If you see this, the modal is working!</p>
        <button @click="showEditModal = false">Close</button>
      </div>
    </template>
  </UModal>
</template>
Key Point:
Replace v-model="showEditModal" with v-model:open="showEditModal" in your <UModal> component. This should resolve the issue and allow your modal to open and close as expected [Migration Guide]. If you follow this pattern and your showEditModal is reactive, the modal should display when you set showEditModal.value = true in your handleEdit function. If you still have issues, ensure that your modal is not conditionally rendered (e.g., with v-if) in a way that would prevent it from mounting, and that there are no errors in your console. --- References:
- UModal Control Open State - Migration Guide: Changed Components ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@803283169511735356> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?