Vue.jsサンプルコード（19）文字をクリックすると編集できるようにする｜TechRacho by BPS株式会社

前記事: 18. スター[★]を1回だけ押せるようにする 次記事: 20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する 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