だいぶVueについてわかってきたので、ひとつ作ってみた。
用途
セレクトボックスで選択した値によって、表示内容を切り替えるプログラム。
セレクトされた値に応じて警告、あるいは入力項目が変わるなどの場合に使う。
実装
v-modelディレクティブを使って、formの値に対する双方向のデータバインディングを使う。
https://jp.vuejs.org/v2/guide/forms.html
See the Pen select changer by git-cat-meow (@git-cat-meow) on CodePen.
v-modelで取得した値を変数に格納して、v-ifの条件式を使ってtemplateを出し分けるだけ。
公式で指摘されているように、初期値が選択されても大丈夫なようにvalueに空の値を設定しておく。念のためdisabeledも設定しておく。
あとはtemplateにv-ifを仕込むが、イコール3つで型の確認も行う厳密なイコールになるようにしておく。
シンプルに実装できた。いい感じだ。初歩の内容だが、作りたいものが作れたときの達成感は重要。
