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

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"&nbsp; ref="editDetails"&nbsp; :return-value.sync="edit"></v-dialog>在 updateContact 中，如果项目保存正确，您可以保存 perfsthis.$refs.editDetails.save(this.edit);