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

vincent15000's avatar

Retrieving data only on second click on button

Hello,

I have a table, each line is one line from the database and for each one I have a button to edit the line.

When I click on the button, I open a modal window.

I try to load the data of the model to update via partial reloading with InertiaJS.

Here is my code in the table component.

// Form component inside the table component
<StateForm2
  :dialogVisible="stateDialog"
  @close="closeStateDialog()"
></StateForm2>
...
// The button on which I click on
<el-button
  type="primary"
  @click="openStateDialog(scope.row.id)">
  Editer
</el-button>
...
// Action when I click on the button
openStateDialog(stateId) {
  Inertia.visit(route('states.index'), {
    preserveState: true,
    preserveScroll: true,
    data: { stateId: stateId },
    only: ['state']
  }, { replace: true })
  // this.stateId = stateId
  this.stateDialog = true
},

And in the form component.

// I load the datas when the dialog is opening
loadData() {
	this.state = usePage().props.value.state
},

The problem is : when I click on the button, the datas displayed in the form are those from the last click.

Example :

  • click 1 : openStateDialog(5) => it opens with value 0
  • click 2 : openStateDialog(18) => it opens with value 5
  • click 3 : openStateDialog(2) => it opens with value 18 ...

I have this warning.

[Vue warn]: Extraneous non-props attributes (errors) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

And when I check the datas retrieved from the request, I get data 5 for click 1, data 18 for click 2, ... That means that the state isn't updated. So I tried to remove preserveState: true in the Inertia request, but removing it, the modal window doesn't display anymore (appears and disappears immediately) and I have this violation.

[Violation] Added non-passive event listener to a scroll-blocking <certains> événements. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Can you help me to see where my code is wrong ?

Thanks a lot.

V

0 likes
2 replies
Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

First of try ensuring that the modal only opens when the data is loaded

openStateDialog(stateId) {
  Inertia.visit(route('states.index'), {
    preserveState: true,
    preserveScroll: true,
    data: { stateId: stateId },
    only: ['state'],
    onSuccess: () => {
          this.stateDialog = true
    }
  }, { replace: true })
  // this.stateId = stateId
 
},
1 like
vincent15000's avatar

@Sinnbeck Thank you very much ... it's ok, it works fine when I open the modal window when the data is loaded.

Please or to participate in this conversation.