Laravel and Vue reactibility

Hi! This is more a general question, so I won't show any code.

I'm in the process of learning Vue, but a question popped up in my mind:

When I use Vue inside Laravel to show a form and update a database, how is that change reflected in the view file?

Let me paint a picture:

1: I have a quick form to register students with LARAVEL ONLY. The form sends a Post to the Controller that does its magic, and in the end, the Controller just redirects back to the same page, reloading it entirely. 2: I then implement Vue, create a table with all those students, and make it so the form shows up when you click on one table row. You edit the changes you need, and then click "save". 3: This then triggers an API route that goes back to the same controller, which does its magic again but in the end, just redirects back to the page, making it so the page refreshes.

What am I missing to make it so when you update the student, the whole page isn't reloaded, but just the change is show?

piljac1

5 years ago

Best Answer

Level 28

You shouldn't redirect on your update route. You should return a JSON response at the end of your update method. If you use class based request validation (instead of a validation inside the controller function), validation errors will automatically get returned as a json response.

If you block form edition and resubmission as long the promise is not resolved, the easiest way to do so is by simply returning an empty JSON response which will return a 200. Since it returns a 200, it will hit your then callback (if using axios) and in there, you can put your logic to update your table row. Else, if an error is encountered, the catch callback will be triggered. You can then renable your form in the finally callback.

return response()->json();

You could also return your updated data in the json response if desired.

mirino77

5 years ago

Level 4

Riiiiiiiiiiiiight! That makes a lot of sense. I didn't think about changing rerouting to just a json answer.

Thank you for your time and your answer!

Please or to participate in this conversation.