Inertia link does not reload the page form data
See original GitHub issueIf I am on an the edit
page for Organizer A
and click on an inertia link to edit
Organizer B.
Inertia replaces the url but the form is not reloaded and keeps Organizer A data
(and vue blows up)
(If I click on the link from any other page it works as expected.)
Example href: https://test-site.test/app/organizers/org-YSMqnF-L8VSq8s5jzZ-nB/edit
<inertia-link :href="app.organizers.edit " method="get">{{organizer.name}}</inertia-link>
OrganizerController@edit
public function edit(Organizer $organizer)
{
return inertia('Organizers/Edit', [
'organizer' => $organizer,
]);
}
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:16 (3 by maintainers)
Top Results From Across the Web
Partial reloads
Partial reloads. When making visits to the same page, it's not always necessary to fetch all of the data required for that page...
Read more >Inertia: Reload page with updated data without modifying ...
The behaviour I would like is: a user scrolls down a page, clicks the completed button, and the back-end sends that newly updated...
Read more >Inertia React, can't get updated data on redirect back ...
When the page loads initially, the basket is passed from Laravel to Vue when Inertia passes the props, and I have a created()...
Read more >Inertia reloads whole page instead of SPA
Hello I am trying Inertia with Laravel Jetstream and Vue for a small project. All routes are behaving like a SPA expect one...
Read more >The Ultimate Guide to Inertia.js
Inertia is similar to Vue Router, in that it allows you to move between pages without having to reload the entire page. However,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @tanthammar if you can please share some of your page component, at least props and the top level
form
or the container element that wraps the form.In the meanwhile one thing you can try is adding a
':key
prop to your form element to force Vue re-render the form if some props changes:Other thing to check: you might be copying the organizer fields to an object in the component’s
data()
so you can usev-model
in your form.As the page component is kept the same the component won’t run the
data()
when just the prop changed. So you can use theupdated()
life-cycle hook to update the form fields, if that is the case.For example:
If you have more props that can change from the server prefer using a watcher over using the
updated()
lifecycle hook, otherwise you user can loose edits:Hope any of that helps.
EDIT updated watcher code
@IvanBernatovic So, this is actually being caused by Jetstream, not Inertia.js. It’s because Jetstream defaults form submission to
{ resetOnSuccess: true }
, which is actually problematic if you submit a form back to the same page. Basically what happens is Jetstream captures the props on the initial component load and saves them in local memory. Then, when you make a request to submit the form, it returns back to the same component, which still has those original values in memory, and Jetstream restores those values.Update your
UserForm.vue
file to fix this:IMHO, Jetstream shouldn’t default
resetOnSuccess
totrue
, but rather this should be an opt-in thing you use when it’s needed (ie. resetting password inputs back to blank).