在单击编辑表单中的更新按钮之前，如何停止更新数据？

Question

我正在处理 vue.js 模板，并且我有一个内容编辑和内容添加表单。当我单击编辑按钮时，当时我传递了对象以显示用于在表单中编辑的数据，但我使用v-modal它在单击按钮更新之前显示即时更改。<v-form v-model="valid" @submit.prevent="updateContact(edit)">    <v-card-text>        <v-container grid-list-md>            <v-layout wrap>                <v-flex xs12>                    <v-text-field label="Name" v-model="edit.name"></v-text-field>                </v-flex>                <v-flex xs12>                    <v-text-field label="Designation" v-model="edit.designation"></v-text-field>                </v-flex>            </v-layout>        </v-container>    </v-card-text>    <v-card-actions>        <v-spacer></v-spacer>        <v-btn color="primary" @click="onEditCancel()">Cancel</v-btn>        <v-btn color="error" type="submit">Update</v-btn>    </v-card-actions></v-form>   当我点击编辑按钮时，我点击了以下功能：onEditContact(contact) {    this.dialog1 = true;    this.edit = contact;},联系方式更新方法：updateContact(edit){    console.log(edit);}

Answer 1

如果未保存，您可以通过向 v-dialog 组件添加其他属性来重置表单数据更改

<v-dialog v-model="dialog1"

  ref="editDetails"

  :return-value.sync="edit"

>

</v-dialog>

在 updateContact 中，如果项目保存正确，您可以保存 perfs

this.$refs.editDetails.save(this.edit);