inertia: Inertia link does not reload the page form data

If 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,
    ]);
}

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 16 (3 by maintainers)

Most upvoted 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:

<form :key="organizer.id" ...>
... 
</form>

Other thing to check: you might be copying the organizer fields to an object in the component’s data() so you can use v-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 the updated() life-cycle hook to update the form fields, if that is the case.

For example:

<script>
export default {
  props: ['organizer'],

  data() {
    return {
      name: this.organizer.name,
      address: this.organizer.address,
    };
  },

  updated() {
    this.name = this.organizer.name;
    this.address = this.organizer.address;
  },
}
</script>

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:

<script>
export default {
  props: ['organizer'],

  data() {
    return {
      name: this.organizer.name,
      address: this.organizer.address,
    };
  },

  watch {
    organizer(current, old) {
      if (current.id === old.id) return; // same organizer -> ignore

      // different one -> update form fields
      this.name = current.name;
      this.address = current.address;
    },
  },
}
</script>

Hope any of that helps.

EDIT updated watcher code

rodrigopedra on Mar 31, 2020

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

form: this.$inertia.form({
  name: this.user?.name || "",
  email: this.user?.email || "",
}, {
  resetOnSuccess: false,
}),

IMHO, Jetstream shouldn’t default resetOnSuccess to true, but rather this should be an opt-in thing you use when it’s needed (ie. resetting password inputs back to blank).

reinink on Oct 20, 2020