JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<div id="app">
  <my-component></my-component>
</div>

JavaScript

Vue.component('my-component', {
  template: '<div><div v-if="!editMode" @dblclick="startEdit">{{text}}</div><div v-if="editMode"><input type="text" v-model="editText" @keyup.esc="cancelEdit" ref="editor" @blur="completeEdit" @keyup.enter="completeEdit" /></div></div>',
  data: function() {
  	return {
    	editMode: false,
      text: 'double-click-me',
      editText: ''
    }
  },
  methods: {
  	startEdit: function() {
    	this.editText = this.text;
      this.editMode = true;
      var vm = this;
      Vue.nextTick(function() { vm.$refs.editor.focus(); })
    },
    cancelEdit: function() {
    	this.editMode = false;
    },
    completeEdit: function() {
    	if( this.editMode ) {
        this.text = this.editText;
        this.editMode = false;
      }
    }
  }
});


new Vue({
	el: '#app',
  data: {
  	message: 'test'
  }
});