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 app = new Vue( {
	el: '#app',
	data: {
		vobj: { prop1: 'prop1 value', prop2: 'prop2 value', prop3: 'prop3 value' },
		isedit: false
	},
	methods: {
		edit: function () {
			console.log( "edit" );
			this.isedit = !this.isedit;
		},
		save: function () {
			console.log( "save" );
			this.isedit = !this.isedit;
		},
		cancel: function () {
			console.log( "cancel" );
			this.isedit = !this.isedit;
		}
	}
} )