my current situation is as follows:
I am utilizing an el-table component to display data fetched from an API. I have organized this data into a computed property so that I can easily sort, filter, and paginate the table. Additionally, I have incorporated a column for editing or deleting a row. The edit button triggers an el-form with "cancel" and "confirm" buttons, while the delete button prompts a confirmation popup.
However, my issue arises when updating or deleting rows. Despite the data being updated, it does not reflect on the UI until I click on another row. Interestingly, if I use raw data without APIs or computed properties, the edit and delete functions work seamlessly. The problem seems to occur only when confirmation dialogs are involved.
Is there a way to update or delete data without needing to click outside of the fields?
Below are the computed properties used in organizing the data:
computed: {
displayData() {
// code for computing and displaying data goes here
},
},
Furthermore, here are the methods implemented for handling the edit, confirm, and delete actions:
methods: {
// code for handling update operation
handleUpdate(row) {
// implementation details go here
},
// code for updating data record
updateData() {
// implementation details go here
},
// code for handling deletion operation
handleDelete(row, index) {
// implementation details go here
},
},