v-selectでplaceholderが表示できない場合の対処メモ

環境

OS:windows11
Nuxt3,vue3,vutify3,typescript etc...

現象

v-selectを使って実装されたセレクトボックスにplaceholderを設定しようとしたがうまく行かなかった。

試行錯誤

• ほぼ同じ実装をしている複数選択可能なセレクトボックスはプレイスホルダーを設定可能。
• セレクトボックスは双方向バインディングで値を制御しており、単一選択は空文字、複数選択は空リストが初期値として渡されていた。
• v-modelにnullを設定したらプレイスホルダーが表示できた。

原因

上記の試行錯誤から、プレイスホルダーが表示できない理由はすでに空文字という値が設定されているからだと推測。

解決策

コンポーネントに渡すv-modelの変数を配列にして配列の先頭の要素のみを扱う。
これによって初期値は要素無しの[]となりプレイスホルダーは表示される。

親要素並びv-select内部ではlist[0]としてstring型として扱う。