Click-to-edit

by psteele

HTML

<div id='app'>
  <editor :value='status'></editor>
</div>

<script type='x/template' id='editorTemplate'>
	<div id='container'>
    <div v-if="editMode">
    	Status: <input type='text' v-model='editValue' ref='control' @blur='commitEdit' @keyup.13='commitEdit' @keyup.27='cancelEditMode' />
    </div>
    <div v-else='' @click='goEditMode'>
    	Status: {{ propData }}
    </div>
  </div>
</script>

CSS

#container div {
  line-height: 25px;
}

#container {
  /*font-size: 1.8em;*/
}

JavaScript

Vue.component('editor', {
	template: '#editorTemplate',
  props: ['value'],
  data: function() {
  	return {
    	propData: this.value,
      editMode: false,
      editValue: ''
    }
  },
  methods: {
  	goEditMode: function() {
    	this.editValue = this.propData;
    	this.editMode = true;
      this.$nextTick(function() {
      	this.$refs.control.focus();
        this.$refs.control.select();
      });
    },
    cancelEditMode: function() {
    	this.editMode = false;
    },
    commitEdit: function() {
    	if( this.editMode) {
        this.editMode = false;
        this.propData = this.$refs.control.value;
        this.$emit('input', this.propData);
      }
    }
  }
});

new Vue({
	el: '#app',
  data: {
  	status: 'hello'
  },
  watch: {
  	status: function(val) {
    	console.log('new value: ' + val);
    }
  }
});