Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(19)文字をクリックすると編集できるようにする

19. 文字をクリックすると編集できるようにする

  • Vue.jsバージョン: 2.5.2
  • 「クリックして編集」をクリックすると文字を変更できます。
  • Enterを入力するか、他の場所をクリックするなどでフォーカスを移動すると入力が終了します。
  • 変更した文字は、入力が終わっても変わりません。
  • 画面をリロードすると最初の状態に戻ります。

サンプルコード

HTML側でvのtrue/falseを判定しています。

  <template v-if="f">
    <input v-model="v" @keyup.enter="f = false" @blur="f = false" ref="r1" />
  </template>
  <template v-else="">
     <span @click="c">{{v}}</span>
  </template>

ポイント: $nextTickで次のフレームでの処理を行っています。

  const vm = new Vue({
    el: "#app",
    data: {v: "クリックして編集", f: false},
    methods: {
      c: function() {
        this.f = true
        this.$nextTick(function () { this.$refs.r1.focus() })
      },
    },
  })

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。