前回の続き。 vue-touch-keyboardでカスタムキーボードを作るには、ソースコードのlayouts.jsを見ればわかります。 特にシフトキーやCapsキー用のレイアウトが必要ない場合は_metaとdefaultを定義すればOKです。 defaultは表示通りの入力で良い場合は単にその文字、特殊キーは{}で括ったうえで_metaに定義を記載します。 key: 入力文字列 text: 表示文字列 classes: DOMのclass width: DOMのwidth func: 押下時に実行される関数名 funcは任意の関数名が使えるわけではなく、ソースのkeyboard.vueのpropsで定義されている以下のもののみです。 [onClickイベント発生時] accept: 確定 cancel: キャンセル next: フォーカス移動 [onChangeイベント発生時] chan

Vue.js v2でソフトウェアキーボードを使おうとすると、vue-touch-keyboardが第一候補に挙がるわけですが、公式のREADMEやJSFiddleのサンプルだけではイマイチピンとこないところがあるわけです。 その典型例が「どうやってv-modelでのdatabindと共存するの？」なわけですが、今回はそれをテーマにしたいと思います。 まず、オリジナルのJSFiddleサンプルをforkして、3つあるinputに同じ変数（ここではvm.data.value）をv-modelでdatabindさせたものがこれです。 vue-touch-keyboard + v-model（動かない） 試してみるとすぐわかりますが、ソフトウェアキーボードから入力した値がclose（またはnext）キーの押下で消えてしまいます。 これはvue-touch-keyboardが入力対象のDOMに対して