vue.js - Editing a form with save and cancel options -

i'm new vuejs. i'm trying create form simple save , cancel functionality. when binding model form fields updated inputs changed, don't want tight binding. instead, want able save , submit when "save" button pressed , revert changes when "cancel" button pressed.

what's suggested vue way of doing this?

it ideal if can show server save status , indicate on form if submission failed. if know of examples or samples hugely helpful. thanks!

see in 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> 

there's few ways handle this. create separate component form, pass props it, , handle editing/saving there or if want keep in single component use value binding , refs, e.g.

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 use variable cache mechanism (with suggested edits) e.g.

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>

with of these options can set status message @ start of save method , update whenever you're done server call.