vue.jsでinputにfocus時のみ表示される「決定」ボタンと、サンプルコード

inputにfocusされている時だけ、ボタンを表示させるデザインを描きたいことありますよね。ユーザーの入力データを一項目ずつ保存させたいデザインの際、ボタンだらけにならずに済むので助かります。

それ、vue.jsで簡単に実装できます。

コード

デモ jsfiddle

html

  <form @submit.prevent="submit">
    <h2>Front End</h2>
    <input type="text" v-model="value" @focus="focus" @keyup.esc="cancel" v-el:input-ele>
    <div v-show="onFocus">
      <p @click="cancel">cancel</p>
      <p @click="submit">submit</p>
    </div>
  </form>

js

var app = new Vue({

  el: '#app',

  data: {
    value: '',
    tmp: '',
    onFocus: false
  },

  created() {

    this.value = _DB

  },

  methods: {

    focus() {
      this.tmp = this.value
      this.onFocus = true
    },

    submit() {
      this.onFocus = false
      this.$els.inputEle.blur()
      this.ajax()
    },

    cancel() {
      this.value = this.tmp
      this.onFocus = false
    },

    ajax() {
      // do something
    }

  }  

})

※ 上記コードだけでは動きません（参考までにどうぞ）

終わり

vue.jsの公式にあるtodoアプリの超簡易バージョンといったところでしょうか。上記コードを配列などうまく使って拡張すれば、実際に即、運用可能になります。