HTML
vue.js

【Vue.js】動的リストにより生成する select/option の初期値が画面リロード時に表示されない課題の解決

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 だと楽だったりしないかな)
  • 公式ドキュメントやインターネットに転がってる情報と手元にあるコードのギャップが辛くもあったのでバージョンアップは急務か