vuetest

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <h1>Vue App</h1>
  <ul>
    <li>{{ vobj.prop1 }}</li>
    <li>{{ vobj.prop2 }}</li>
    <li>{{ vobj.prop3 }}</li>
  </ul>
  <button @click="edit">edit</button>
  <editor :vobj="vobj" v-on:save="save" v-on:cancel="cancel" v-if="isedit"></editor>
</div>
<script type="text/x-template" id="editor-template">
  <div class="editor">
    <h3>editor</h3>
    <label>Prop1:
      <input type="text" v-model="vobj.prop1">
    </label>
    <label>Prop2:
      <input type="text" v-model="vobj.prop2">
    </label>
    <label>Prop3:
      <input type="text" v-model="vobj.prop3">
    </label>
    <button @click="save">save</button>
    <button @click="cancel">cancel</button>
  </div>
</script>

SCSS

body     	{ background: #fff; font-family: Arial, Helvetica, sans-serif; }
#app     	{ border: 1px solid #eee; padding: 2em; }
.editor  	{ padding: 1em; margin-top: 1em; background: #fff;}
label    	{ margin-bottom: 1em; display: block; color: #aaa;}
h1, h3      { margin-top: 0; text-transform: uppercase; font-weight: normal;}
input 		{ padding: .5em 0em; border: 0; border-bottom: 1px solid #aaa; color: #999; 
	&:focus { outline: 0; border-bottom-color: #f60;}
}
button   	{ border: 1px solid #f60; color: #f60; background: transparent; cursor: pointer; padding: .5em 2em; text-transform: uppercase;
  &:hover 	{ background: #f60; color: #fff;}
}

JavaScript

Vue.component('editor', {
  props: ['vobj'],
  template: '#editor-template',
  methods: {
    save: function() {
      this.$emit('save');
    },
    cancel: function() {
      this.$emit('cancel');
    }
  }
})

var vobj = {
  prop1: 'prop1 value',
  prop2: 'prop2 value',
  prop3: 'prop3 value'
};

var app = new Vue({
  el: '#app',
  data: {
		vobj,
    initialVobj: Object.assign({}, vobj),
    isedit: false
  },
  methods: {
    edit: function() {
      console.log("edit");
      this.isedit = !this.isedit;
    },
    save: function() {
      console.log("save");
      this.isedit = !this.isedit;
    },
    cancel: function(initialState) {
      console.log("cancel");
      this.isedit = !this.isedit;
			
      this.vobj = Object.assign(this.vobj, this.initialVobj)

    }
  }
})