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