Editing a form with options for saving and canceling

Question

I am new to VueJS. I am trying to create a form with a simple Save and Cancel function. When binding the model to the fields, they are updated immediately as the inputs change, but I do not want this to be a hard binding. Instead, I want to save and send when the "Save" button is clicked, and revert the changes when the "Cancel" button is clicked.

What is the proposed Vue method for this?

It would also be ideal if we can show the server’s save status and indicate it in the form if the feed failed. If you know any examples or patterns that would be extremely helpful. Thanks!

See JSFiddle

<template> <div id="app"> <div> First Name: <input type="text" v-model="user.firstName" :disabled="!isEditing" :class="{view: !isEditing}"> </div><div> Last Name: <input type="text" v-model="user.lastName" :disabled="!isEditing" :class="{view: !isEditing}"> </div> <button @click="isEditing = !isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> <button v-if="isEditing" @click="isEditing = false">Cancel</button> </div> </template> <script> var app = new Vue({ el: '#app', data: { isEditing: false, user: { firstName: 'John', lastName: 'Smith' } } }) </script> <style> .view { border-color: transparent; background-color: initial; color: initial } </style> 

Answer 1

There are several ways to handle this. You can create a separate component for the form, pass the details to it, and then process the editing / saving, but correct the changes or if you want to save it in one component, you can use the value and refs binding, for example

 var app = new Vue({ el: '#app', data: { isEditing: false, user: { firstName: 'John', lastName: 'Smith' } }, methods: { save() { this.user.firstName = this.$refs['first_name'].value; this.user.lastName = this.$refs['last_name'].value; this.isEditing = !this.isEditing; } } }) 

 .view { border-color: transparent; background-color: initial; color: initial } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <div> First Name: <input type="text" ref="first_name" :value="user.firstName" :disabled="!isEditing" :class="{view: !isEditing}"> </div><div> Last Name: <input type="text" ref="last_name" :value="user.lastName" :disabled="!isEditing" :class="{view: !isEditing}"> </div> <button @click="isEditing = !isEditing" v-if="!isEditing"> Edit </button> <button @click="save" v-else-if="isEditing"> Save </button> <button v-if="isEditing" @click="isEditing = false">Cancel</button> </div> 

Or you can use the variable caching mechanism (with suggested changes), for example

 var app = new Vue({ el: '#app', data: { isEditing: false, user: { firstName: 'John', lastName: 'Smith', } }, mounted() { this.cachedUser = Object.assign({}, this.user); }, methods: { save() { this.cachedUser = Object.assign({}, this.user); this.isEditing = false; }, cancel() { this.user = Object.assign({}, this.cachedUser); this.isEditing = false; } } }) 

 .view { border-color: transparent; background-color: initial; color: initial } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <div> First Name: <input type="text" v-model="user.firstName" :disabled="!isEditing" :class="{view: !isEditing}"> </div><div> Last Name: <input type="text" v-model="user.lastName" :disabled="!isEditing" :class="{view: !isEditing}"> </div> <button @click="isEditing = !isEditing" v-if="!isEditing">Edit</button> <button @click="save" v-else-if="isEditing">Save</button> <button v-if="isEditing" @click="cancel">Cancel</button> </div> 

Using any of these parameters, you can set a status message at the beginning of the save method, and then update it when you are done with the server call.