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

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);