Vue Inline edit

by yobyzal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.15/vue.min.js"></script>
<div id="app">
    <template v-repeat="number in numbers">
        <span v-show="!number.edit"
              v-on="click: toggleEdit(this, number)">{{number.val}}</span>
        
        <input type="text"
               v-el="input"
               v-model="number.val"
               v-show="number.edit"
               v-on="blur: saveEdit(ev, number)"> <br>
    </template>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    numbers: [
        {
            val: 'one',
            edit: false
        },
        {	val: 'two',
         	edit: false
        },
        {
            val: 'three',
            edit: false
        }
    ]
  },
  
  methods: {
  	toggleEdit: function(ev, number){
    	number.$set('edit', !number.edit);
        
        // Focus input field
        if(number.edit){
            Vue.nextTick(function() {
    			ev.$$.input.focus();
	  		})   
        }
    },
      
    saveEdit: function(ev, number){
     	//save your changes
      	this.toggleEdit(ev, number);
    }
  }
})