I have the problem that I am adding a new record using Laravel, Inertia and Vue. The record is added to my table visually but the drop-down action button that contains the delete and edit actions for the new record does not work for the drop-down action, but the button for the records that were already in the table still works. But if I hit F5 and refresh the page, all the buttons work, including the new record.
Will this have to do with something specific that I need to add to my function in the frontend so that a reload is done or something similar? I ask this because when I update or delete the action buttons on the table rows they continue to work but the problem only happens when a new record is added.
controller method to add new records:
public function store(Request $request)
{
$product = new Product();
$product->title = $request->title;
$product->price = $request->price;
$product->quantity = $request->quantity;
$product->description = $request->description;
$product->category_id = $request->category_id;
$product->brand_id = $request->brand_id;
if ($request->quantity > 0)
$product->inStock = 1;
$product->save();
//check if product has images upload
if ($request->hasFile('product_images')) {
$productImages = $request->file('product_images');
foreach ($productImages as $image) {
// Generate a unique name for the image using timestamp and random string
$uniqueName = time() . '-' . Str::random(10) . '.' . $image->getClientOriginalExtension();
// Store the image in the public folder with the unique name
$image->move('product_images', $uniqueName);
// Create a new product image record with the product_id and unique name
ProductImage::create([
'product_id' => $product->id,
'image' => 'product_images/' . $uniqueName,
]);
}
}
return to_route('admin.products.index')->with('success', 'Product created successfully.')->with('prueba', 'Esto fue una prueba');
}
This is the method on the frontend:
const AddProduct = async () => {
const formData = new FormData();
formData.append("title", title.value);
formData.append("price", price.value);
formData.append("quantity", quantity.value);
formData.append("description", description.value);
formData.append("brand_id", brand_id.value);
formData.append("category_id", category_id.value);
// Append product images to the FormData
for (const image of productImages.value) {
formData.append("product_images[]", image.raw);
}
try {
await router.post("products/store", formData, {
preserveState: true,
onSuccess: (page) => {
dialogVisible.value = false;
resetFormData();
Swal.fire({
toast: true,
icon: "success",
position: "top-end",
showConfirmButton: false,
title: page.props.flash.success,
showCloseButton: true,
});
},
});
} catch (err) {
console.log(err);
}
};
And this is the table I have:
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
>
<tr>
<th scope="col" class="px-4 py-3">
Product name
</th>
<th scope="col" class="px-4 py-3">Category</th>
<th scope="col" class="px-4 py-3">Brand</th>
<th scope="col" class="px-4 py-3">Quantity</th>
<th scope="col" class="px-4 py-3">Price</th>
<th scope="col" class="px-4 py-3">Stock</th>
<th scope="col" class="px-4 py-3">Publish</th>
<th scope="col" class="px-4 py-3">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in products" :key="product.id" class="border-b dark:border-gray-700">
<th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{{ product.title }}
</th>
<td class="px-4 py-3">
{{ product.category.name }}
</td>
<td class="px-4 py-3">
{{ product.brand.name }}
</td>
<td class="px-4 py-3">
{{ product.quantity }}
</td>
<td class="px-4 py-3">{{ product.price }}</td>
<td class="px-4 py-3">
<span v-if="product.inStock == 1"
class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
>inStock
</span>
<span
v-else
class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
>Out of Stock
</span>
</td>
<td class="px-4 py-3">
<button
v-if="product.published == 1"
type="button"
class="px-3 py-2 text-xs font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
>
Published
</button>
<button
v-else
type="button"
class="px-3 py-2 text-xs font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
>
UnPublished
</button>
</td>
<td class="px-4 py-3 flex items-center justify-end">
<button
:id="`${product.id}-button`"
:data-dropdown-toggle="`${product.id}`"
class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100"
type="button"
>
<svg
class="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
/>
</svg>
</button>
<div
:id="`${product.id}`"
class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
:aria-labelledby="`${product.id}-button`"
>
<li>
<a
href="#"
@click="
openEditModal(product)
"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>Edit</a
>
</li>
</ul>
<div class="py-1">
<a
href="#"
@click="
deleteProduct(
product,
index
)
"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete</a
>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I also leave a photo of the table to indicate what type of buttons I am referring to:
What could be happening that the status for that new product does not work?
New contributor
albertolg89 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I solved the problem, the detail was that preserveState: true, I had it at true and it had to be false so that the state was not preserved and the new state could be updated
New contributor
albertolg89 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.