その他

【Vuetify】v-selectの選択リスト全てで、v-list-item--activeが有効になる原因と解決方法

悩んでいる人
悩んでいる人

Vuetifyのセレクトボックスでリストの背景色が水色一色になってしまう…

セレクトボックスの全てのリストアイテムで、v-list-item--activeが有効になってしまう…

こんな疑問を解決いたします。

エラーの詳細

LaravelとVue.js、vuexを使ったシステム開発にて問題が発生しました。

問題のコードは下記です。

<v-select v-model="journalistInfo"
      outlined dense hide-details label="報告者(必須)"
      :rules="[rules.required]"
      :items="journalists">
  <template v-slot:item="{ item, on, attrs }">
    <template>
      <v-list-item v-on="on" v-bind="attrs">
        <v-list-item-title class="subtitle-1">{{item.journalist_name}}</v-list-item-title>
      </v-list-item>
    </template>
  </template>
  <template v-slot:selection="{item}">
    <span>{{item.journalist_name}}</span>
  </template>
</v-select>

上記コードは以下のようなUIとなります。↓↓

初回選択時は問題ないです。↓↓

itemを一つ選択し、再度セレクトボックスを開くと全ての項目が水色背景色になってしまいます。↓↓

実際に表示されているHTMLコードを見てみると、すべてのitemに対してv-list-item--activeというクラスが有効となってしまっています。

v-list-item--activeクラスは本来、現在選択されているitemをハイライトするクラスですので、v-list-item--activeクラスは選択中のitemにのみ有効になるのが正しいです。

解決策

<v-select v-model="journalistInfo"
      outlined dense hide-details label="報告者(必須)"
      :rules="[rules.required]"
      :items="journalists"
      item-text="journalist_name" //←追加
      return-object //←追加
      >
  <template v-slot:item="{ item, on, attrs }">
    <template>
      <v-list-item v-on="on" v-bind="attrs">
        <v-list-item-title class="subtitle-1">{{item.journalist_name}}</v-list-item-title>
      </v-list-item>
    </template>
  </template>
  <template v-slot:selection="{item}">
    <span>{{item.journalist_name}}</span>
  </template>
</v-select>

公式ドキュメントに答えが載っておりました。

items プロパティにオブジェクトを使用する場合、item-text と item-value をオブジェクトの既存のプロパティと関連付ける必要があります。 これらの値は text と value にデフォルトで設定されていますが、変更できます。

https://v2.vuetifyjs.com/ja/components/selects/#section-6ce8610f4e8b9805

今回、itemsプロパティにオブジェクトを使用していたためitem-textを指定する必要がありました。

尚且つオブジェクトを直接返すように、return-objectを指定します。
(参考:https://vuetifyjs.com/en/api/v-select/#props-return-object

これで解決です。

  • この記事を書いた人

コウダイ

文系・ノースキル・完全未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内上場IT企業のフルリモートWebエンジニアに転職した人。

都内上場IT企業に勤務するWebエンジニア5年目|プログラミングスクールのテックキャンプ公式アンバサダー|新卒で手取り18万の地方ホテルマン6年→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収100万円UP|33歳2児のパパ|ブログ歴4年→月間6,000PV|エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他