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サンプルコード（04）双方向データバインディングを使ってみる
- Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
- Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード（15）パスワードのマスクを解除する
- Vue.jsサンプルコード（16）パスワードを入力中だけ表示する
- Vue.jsサンプルコード（17）[いいね]ボタンを押すとボタンが文言に変わる
- Vue.jsサンプルコード（18）スター[★]を1回だけ押せるようにする