I encountered a similar dilemma
Is it possible to disable the button or prevent saving invalid data?
I managed to find a solution by separating the item value from the edited value and ensuring that only valid data is saved.
By creating a separate data field called editName and connecting the v-text-field to it, you can initialize the value on open and validate it on save, without contaminating the item value with incorrect information.
Here's how:
- The
v-model for the v-text-field should be set to v-model="editName"
- The
v-edit-dialog utilizes the @open event which sets the edit value - @open="editName = props.item.name"
- You need to check the
this.editName on save within your saveName(props.item)
For example:
<v-data-table dense :headers="headers" :items="sitesTable">
<template v-slot:item.name="props">
<v-edit-dialog
large
persistent
@save="saveName(props.item)"
@open="editName = props.item.name"
>
<div>{{ props.item.name }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Name</div>
</template>
<template v-slot:input>
<v-text-field
v-model="editName"
:rules="required"
label="Edit"
single-line
counter
autofocus
></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-data-table>
Upon Saving:
saveName(item) {
if (this.validate(this.editName) {
item.name = this.editName
...
}
}
Edit: I have removed the
:return-value.sync="props.item.name"
attribute from
v-data-table as it was interfering with the assignment of
item.name in the
saveName() function