'Vuetify v-edit-dialog to change data table values async

I decided to use the data table with edit dialog from Vuetify. I managed to customize it to my own structure and data. However, on save I want to make a post request to the back-end and update the value in the table only after I receive a success. Instead, the default functionality is somehow syncing the value in the dialog input with the one in the table, which is something I don't want. I know it has to do something with this :return-value.sync but I don't know how should I modify it in order to update the value only when I want to, or at least how to turn it back to the previous value if an error occurs. I already did the sending of the correct data in the post request, I'm not asking about it.

<template v-slot:item.title="props">
            <v-edit-dialog
                :return-value.sync="props.item.title"
                @save="save(props.item)"
                @cancel="cancel"
                @open="open"
                @close="close"
            >
                {{ props.item.title }}
                <template v-slot:input>
                    <v-text-field
                        v-model="props.item.title"
                        :rules="[max25chars]"
                        label="Edit"
                        single-line
                        counter
                    ></v-text-field>
                </template>
            </v-edit-dialog>
</template>

Any help would be appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source