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 "",
};
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
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 "",
};
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
