【vue, vuetify】v-selectの中身にCSSを当てたい

vuetifyで複数の<v-select>を利用していますが、
１つのセレクトボックスのダイアログにだけCSSを当てたいです。

.v-list-item__titleにCSSを当てることまでは理解できているのですが、
複数ある<v-select>の１つにだけ適用させたいです。

<v-select class="XXXX">としても、インプット要素にはクラスが当たりますが、
選択肢のダイアログに当てるということができずに悩んでいます。

解決方法をご存知の方がいましたらご回答よろしくお願いいたします。

Twoshi

2021/01/26 06:25 編集

こんにちは！ご質問拝見いたしました。ご質問内容にある１つのセレクトボックスのダイアログというのはどのような部分なのかご記入いただくことはできますでしょうか？(スクショなどあればありがたいです。) また、当てたいスタイルの内容もご記入いただけるとありがたいです。ソース自体をご記入いただけるとなお回答もしやすいと思います。

JsoHaya

2021/01/26 06:36

ご確認ありがとうございます。セレクトボックスのスクショを貼りました。この画像は左詰ですが、本当は中央ぞろえになります）このようなセレクトボックスと、選択肢が長文のセレクトボックスが別にあるとして、そちらには「white-space: normal; text-align: left;」を当てて改行左詰にしたいです。ソースは業務PCにありますので、申し訳ないのですが記載することが難しいです。申し訳ございません。

Twoshi

2021/01/26 07:14

ご質問の編集ありがとうございます！上記承知いたしました！

行動規範の内容に同意します

回答1件

ベストアンサー

v-selectコンポーネントのv-slotを利用してclassを指定してはいかがでしょうか？

v-selectタグ内にtemplate v-slot:item="{ item }"を記述することで、templateタグ内にセレクトリストの表示を記述することができます。
そこにclassを当ててあげれば希望のスタイルが当てられると思います。
※spanタグを利用していますが、divタグなどに変更いただいても問題なく動作します。

classについては、付けたいitemの条件を指定してあげると良いと思います。

html
1<span :class="{ class名: 条件式 }">{{ item }}</span>

以下試してみたソースになります。
(cssはわかりやすく色をつけてスタイルがあたることを確認しています。)

html
1      <v-select
2        v-model="value"
3        :items="items"
4        label="Select Item"
5      >
6        <template v-slot:item="{ item }">
7          <span :class="{ class-name: item.length > 10 }">{{ item }}</span>
8        </template>
9      </v-select>