Inline Editor

by WILLIAM CORREA

HTML

<div id="app">
  [ {{ message }} ]
  <hr>
  <inline v-model="message"></inline>
</div>

JavaScript

Vue.component('inline', {
	props: ['value'],
	data: () => ({
  	model: undefined,
  	editing: false
  }),
  watch: {
  	value () {
    	this.model = this.value
    }
  },
  methods: {
  	start () {
    	this.editing = true
    },
  	stop () {
    	this.editing = false
    }
  },
  created () {
  	this.model = this.value
  },
	template: 
  	`<div @click="start">
  		<span v-if="!editing">{{ value }}</span>
      <input v-if="editing" v-model="model" @input="$emit('input', model)" @keyup.enter="stop" @blur="stop"/>
    </div>`
})

new Vue({
	el: '#app',
  data: {
  	message: 'Hello World'
  }
})