Vue.js の現場に初めて着任して、初めてビューの（多分）ちょろい修正をしてたらかなり詰まった話
環境
Vue.js 1.x.x
課題
- プルダウンメニュー内の空選択肢を削除して必ず何かしら有効な値が選択されるようにすること
- 空選択肢は HTML に直書きされているが、他の選択肢は Controller から渡される動的なリスト
- タイトルと差分があるが、空選択肢の削除自体はちょろかったものの、それにより生じたタイトルの課題がよりつらかったという話
わかったこと（結論）
- 動的なリストを
v-forで展開すると HTML で直接書いたselectedは無効- マニュアルに記載有
-
v-modeの値が、選択肢（option）のいずれのvalueとも一致せず、かつMacOSの場合は初期選択肢が非表示- プルダウンメニューを開くと選択肢が存在
- マニュアルに記載有
- テンプレートがコンパイルされる前に
v-modeに選択肢（option）のいずれかの値を入れれば解決すること- 今回の対応では、一つ目の選択肢の値が入るように実装
わからなかったこと（今後の課題）
- 恐らく
Vue側のdata内にselectedを指定してうまくやれば同等のことをできるはず……- だが結局できなかった。その理由は未明
やったこと（試行錯誤）
- 空選択肢が HTML に直書きされていたため、削除
- 空選択肢が無くなれば、他の選択肢が自然と選択されると考えていたが、失敗
- 選択肢の一つ目にあたる
option句にselected属性を付けてselectedを設定- 要するに
selectedにしてしまえばいいのだと考えていたが、失敗 - 公式ドキュメントに無効の旨が書いてあったため要反省
- 要するに
- 公式ドキュメントより、
Vueについて色々書いてあるところのdata部分にselectedを設定- 試行錯誤しつつ様々な値を指定してみたが、失敗
- いま思うに、複数のプルダウンメニュー……つまりオブジェクトを操作している部分なので、意中のものに指定する何かが必要だったのでは
- （先輩に尋ねて）
created()をフックしてv-modeの値を当該プルダウンメニューの選択肢の一番目の値に上書くよう変更- 成功 → レビュー中
- 値の上書きは怖いイメージを持っているが、ビルドに通り挙動も問題ない様子
振り返り
- ちょろい課題だなって思って
Vue.js全体を把握しようとせずに舐めてかかったのは NG - 公式ドキュメントを真面目に読み始めたが、独力で解決できなかったのが辛い
-
selectedを用いて実現する方法は引き続き調査（2.xだと楽だったりしないかな） - 公式ドキュメントやインターネットに転がってる情報と手元にあるコードのギャップが辛くもあったのでバージョンアップは急務か