0

Tengo el problema que cuando estoy adicionando un nuevo registro usando Laravel, Inertia y Vue el registro adicionado se adiciona a mi tabla visualmente pero el boton de accion desplegable que contiene las acciones de eliminar y editar del registro nuevo adicionado no funcionan desplegando la accion pero el boton de los registros que estaban ya en la tabla siguen funcionando. Pero si doy F5 y refresco la página funcionan todos los botones.

Esto tendra que ver con algo en especifico que necesito adicionar a mi funcion en el frontend para que se haga un reload o algo parecido? Pregunto esto porque cuando realizo un update o un eliminar los botones de acciones de las filas de la tabla siguen funcionando pero solo me sucede el problema cuando se adiciona uno nuevo:

metodo del controller para adicionar registros nuevos:

    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');

   }

Este es el metodo en el 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);
    }
};

Y esta es la tabla que tengo:

<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>

Ademas dejo una foto de la tabla para señalar que tipo de botones me refiero:

introducir la descripción de la imagen aquí

1 respuesta 1

0

Encontre la solución al problema. Todo estaba en que tenia en el onSuccess de la función AddProduct el preserveState: true y esto evitaba que se actualizara el estado de la página, por lo que lo cambie a false y media oro funcionó perfecto y la función quedo de la siguiente forma:

    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, {
           
            onSuccess: (page) => {
                dialogVisible.value = false;
                resetFormData();

                Swal.fire({
                    toast: true,
                    icon: "success",
                    position: "top-end",
                    showConfirmButton: false,
                    title: page.props.flash.success,
                    showCloseButton: true,
                });
            },  
            preserveScroll: true,
            preserveState: false,
        });
    } catch (err) {
        console.log(err);
    }

};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.