[Vue.js]クリックすると編集可能に切り替わるテキスト

#はじめに

• クリックすると編集可能に切り替わる
• フォーカスを外すとテキストに戻る

わりとよくあるアレをvue.jsで

#デモ
https://jsfiddle.net/b44cqueg/2/

#説明

js

Vue.directive('auto-focus', {
  bind: function () {
  	var el = this.el;
    Vue.nextTick(function(){
    	el.focus();
    });
  }
});

• このカスタムディレクティブは要素がレンダリングされたときに、対象の要素にフォーカスします。
• bindした瞬間はまだ要素はレンダリングされていないので、Vue.nextTick()で待っています。

html

  <div v-if="!edit" v-text="value" v-on:click="edit = true"></div>
  <input v-if="edit" type="text" 
          v-model="value" v-on:blur="edit = false"  v-auto-focus>

• レンダリングされたときにフォーカスするので、v-showではなくv-ifで切り替えています。

#コード全文

js

Vue.directive('auto-focus', {
  bind: function () {
  	var el = this.el;
    Vue.nextTick(function(){
    	el.focus();
    });
  }
})

new Vue({
    el: '#app',
    data: function(){
    	return {
      	value: 'Test',
        edit: false
      }
    }
})

html

<div id="app">
  <div class="text" v-if="!edit" v-text="value" v-on:click="edit = true"></div>
  <input v-if="edit" type="text" 
          v-model="value" v-on:blur="edit = false"  v-auto-focus>
</div>