Editing a form with save and cancel options

vue.js vuejs2 forms vue-component

There's a few ways to handle this. You could create a separate component for the form, pass props to it, and then handle the editing/saving by emitting changes or if you want to keep it in a single component you could use value binding and 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>

Expand snippet