Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mikola_systems's avatar

Inertia + Axios request + router.get()

Hello! Need help! Creating a form for working with an order without using a useForm(). Form fields are stored in a reactive object:

const form = ref({
    ...
    name: props.order ? props.order.name : null,
    second_name: props.order ? props.order.second_name : null,
    phone: props.order ? props.order.phone : null,
    calculations: props.order ? props.calculations : { basket: [] },
    form_apply: false,
    update_calculations: false
    ...
})

When submitting the form, I make a request using Axios.

axios({
            method: getMethod,
            url: getRoute,
            data: form.value
        })
        .then(function (response) {
            if (response?.data?.success_url) {
                router.get(response?.data?.success_url, {}, {
                    preserveScroll: true,
                })
            } else {
                if (updateCalculations && response?.data)
                    form.value.calculations = response?.data

                formErrors.value = {}
                formDisabled.value = false
            }
        })
        .catch(function (error) {
            formErrors.value = error.response?.data?.errors
            formDisabled.value = false
        })

If I change the quantity of an item in the cart, a request is sent with the parameter update_calculations=true. On the backend I check if this parameter is available, then I simply make certain calculations of the order cost and return the resulting calculations with an updated cart. I put these calculations back into the form.

public function update(Request $request, Order $order)
    {
        $update_calculations = $request->input('update_calculations');
        $basket = $request->input('calculations.basket');

        $calculations = new BasketTools($basket);

        if ($update_calculations) {
            return [
                'basket' => $calculations->basket,
                'total' => $calculations->total,
            ];
        } else {
...

If you need to save the form, errors are checked and if everything is ok, I save the changes to the database and return the appropriate URL for redirection.

if ($form_apply) {
        $request->session()->flash('message', 'Изменения сохранены');
        $success_url = route('orders.edit', ['order' => $order->id]);
} else {
        if ($back_url)
                $success_url = $back_url;
        else
                $success_url = route('orders');
}

return [
        'success_url' => $success_url
];				

I do the redirection using router.get(), this can be seen in the axios request code above.

Everything works with a simple change of data. For example, changes in text fields, changes in the quantity of an item in the cart, deleting an item from the cart:

form.value.calculations.basket.splice(index, 1)

But, if you add a product:

form.value.calculations.basket.push(product)

And then send the form, the request is processed, the URL necessary for redirection is returned, but router.get() does not work. Nothing just happens. There is no error, nothing.

Checked the events:

router.get('/users', data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onCancel: () => {},
  onFinish: visit => {},
})

There is a reaction only with onBefore.

Do you have any thoughts on what the problem is?

0 likes
7 replies
gych's avatar

When you console log the response inside of the if statement, do you get the expected result?

   if (response?.data?.success_url) {
				console.log(response?.data?.success_url);
                router.get(response?.data?.success_url, {}, {
                    preserveScroll: true,
                })
            }
mikola_systems's avatar

@gych yes

console.log(response?.data?.success_url); // h t t p://localhost/orders

I already tried this:

router.get(route('orders'), {}, {
    preserveScroll: true,
    onSuccess: page => {
        
    },
    onError: errors => {console.log(errors)},
})

Still no reaction

mikola_systems's avatar

I also found a pattern. We go to the order, there are 4 items in its basket. If we remove for example 2 products and add up to 2 products, then everything works. If we add 3 products, there is no reaction. Those. if the number of elements in the array increases then it doesn't work. If the number of elements is the same or less, then it works. Array in this variable:

form.value.calculations.basket

Here's an example of what an array with two products looks like.

"calculations": {
    "basket": [
      {
        "type": "product",
        "id": 77,
        "name": "enim dolor",
        "anonce": null,
        "price": "7.00",
        "quantity": 1,
        "exclude_composition": [],
        "picture_info": null,
        "actual_price": "7.00",
        "total": "7.00"
      },
      {
        "type": "product",
        "id": 77,
        "name": "enim dolor",
        "anonce": null,
        "price": "7.00",
        "quantity": 1,
        "exclude_composition": [],
        "picture_info": null,
        "actual_price": "7.00",
        "total": "7.00"
      }
    ],
    "total": "14.00"
  },

The logic here is such that when adding a new product to the array, it looks like this:

      {
        "type": "product",
        "id": 26,
        "name": "cumque et",
        "anonce": null,
        "price": "75.00",
        "quantity": 1,
        "exclude_composition": []
      }

Next comes a put request to update the cart calculations. After recalculating the basket, we rewrite it into a variable:

form.value.calculations = response?.data

The updated cart looks like this:

"calculations": {
    "basket": [
      {
        "type": "product",
        "id": 77,
        "name": "enim dolor",
        "anonce": null,
        "price": "7.00",
        "quantity": 1,
        "exclude_composition": [],
        "picture_info": null,
        "actual_price": "7.00",
        "total": "7.00"
      },
      {
        "type": "product",
        "id": 77,
        "name": "enim dolor",
        "anonce": null,
        "price": "7.00",
        "quantity": 1,
        "exclude_composition": [],
        "picture_info": null,
        "actual_price": "7.00",
        "total": "7.00"
      },
      {
        "type": "product",
        "id": 26,
        "name": "cumque et",
        "anonce": null,
        "price": "75.00",
        "quantity": 1,
        "exclude_composition": [],
        "picture_info": null,
        "actual_price": "75.00",
        "total": "75.00"
      }
    ],
    "total": "89.00"

I checked it many times. Really the problem is increasing the number of elements in this cart array. Why? Unclear.

mikola_systems's avatar

I also noticed. After the router.get() has failed, if you click on some <Link>, errors appear:

[Vue warn]: Unhandled error during execution of native event handler
Uncaught DOMException: Failed to execute 'replaceState' on 'History': [object Array] could not be cloned.
mikola_systems's avatar

I don't know what's funny. But, It doesn't work like this:

form.value.calculations.basket.push(product)

This is how it works:

form.value.calculations = { basket: [...form.value.calculations.basket, product] }
gych's avatar

@shot_gamer Does it also work like this?

const basket = form.value.calculations.basket;
basket.push(product);
form.value.calculations.basket = basket;

Please or to participate in this conversation.