I am developing a demonstration app in Vue 3 and Vuetify 3 and Pinia so that I can learn the main techniques of working with Vuetify. My app displays a list of transactions and provides a form for adding new transactions. That much is working fine. I’ve added buttons to delete a transaction (which also works fine) and to update an existing transaction but that one does NOT work correctly.
The update button correctly displays the current values in the transaction, makes the key read-only (since the key itself should never change) and makes the other values accessible for updating. The edits on the updateable fields work fine. However, when I inspect the validated input prior to updating them, the values are the original ones, NOT the updated ones. I know I’m doing something fundamentally wrong but I’m not quite sure what it is.
Here’s a playground to demonstrate the problem.
- Make sure you’ve turned on Developer Tools so that you can see the console.log.
- Click on the yellow button with the black pencil icon in any row of the table to bring up the Update dialog.
- In the Update dialog, change any one or more of the Description, Transaction Type, or Amount.
- Press the UPDATE TRANSACTION button.
- Watch for the console.log messages that display the values of updated Description, updated TransactionType, and updated Amount. Regardless of what updates you did, only the original values are shown; the values you changed on the form do NOT appear.
I thought that the values of the three fields, Description, Transaction Type, and Amount, were found in:model-value. In other words, the initial value of the form field is what is in :model-value at the time the form is first displayed and that when one of the form fields is changed, the new value could also be obtained from:model-valuebut that doesn’t appear to be true because that’s where I’m trying to get the amended values. What am I misunderstanding?
If you want a local state in the modal (or, should I say, if you want to only apply the changes on confirmation), you have to break reactivity and create a local item variable in the modal, which holds the changes without applying them to model. Only when the confirmation button is pressed you copy item into model.
Also, you want to update the item in items array, not the one in selectedItemUpdate. You do that in a function, which:
- updates the item when the modal updates the value and
- sets
selectedItemUpdatetonull, which closes the modal. This has to be done in parent component, not in child. If you do it in child, and apply the change, the table row becomesnull.
See it working here.
Note: I’ve only fixed the update modal’s logic, you have to implement the same logic for the delete modal.
1