Yet again, I suspect I am doing something wrong but for the life of me I can’t work it out. I’d really appreciate some help.
I have a table of people with names and emails. A parent & child route. Each has an edit button that fires a Bootstrap modal in which my person_edit view is presented. As I edit the fields they change in realtime in the modal’s title and below it on the table of people. So far so good (and a little magical). Saving works just fine.
The problem occurs when I try to create a new person record or delete an existing record. Both mutate the array of people (as oppose to an individual record within it) and both times the array gets out-of-sync with the database.
When a new record is created it is inserted into the table as expected and I can see the fields being edited in realtime. If I save the new record is created as expected. However if I cancel the rollback appears to work only on the individual record (wiping its contents) but not on the mutated array and I am left with a rogue empty record (which causes a crash unless I refresh the page and let the table refill from the database).
Similarly if I delete a record The record is deleted and the database is informed but the in-memory record stays until I refresh.
Does anyone have an insight into what I’m doing wrong? Should I be manually telling the parent view to refresh its data somehow?
Any guidance would be gladly accepted. I have spent an unacceptable amount of time chasing this today!