vuetifyでプルダウンのレイアウトを変更したい

実現したいこと

プルダウンの左側にアイコン
プルダウンの上にラベルを配置したい

前提

vuetifyもしくはvueを使用する。
上記不可能であればHTMLやCSSを使用する
アイコン：MaterialDesignIcons

発生している問題・エラーメッセージ

アイコンの上にラベルが配置されてしまう

該当のソースコード

vuetify
1 <v-row>
2              <v-col cols="auto">
3                <v-icon>mdi-calendar</v-icon>
4              </v-col>
5              <v-col>
6                <div class="text-subtitle-1">ラベル</div>
7                <v-select
8                  v-model="selectedItem"
9                  :items="selectItems"
10                  prepend-icon="mdi-calendar"
11                ></v-select>
12              </v-col>
13            </v-row>

補足情報（FW/ツールのバージョンなど）

vuetify 3.x
vue3.x
ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

プルダウンの左側にアイコン
プルダウンの上にラベルを配置したい

別案。
二行に分けては？

  <v-row>
    <v-col cols="1"/>
    <v-col cols="auto"><div class="text-subtitle-1">ラベル</div></v-col>
  </v-row>
  <v-row>
    <v-col cols="1"><v-icon>mdi-calendar</v-icon></v-col>
    <v-col cols="auto"><v-select .../></v-col>
  </v-row>

投稿2023/11/30 04:24

shiketa

総合スコア3971

yumin0915

2023/11/30 06:06

無事目的の見た目にすることができました。感謝いたします・・・！

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

slotで指定すればいいのでは？

https://vuetifyjs.com/en/api/v-select/#slots-prepend

ためしてはいませんが、たとえば。

diff
1                <v-select
2                  v-model="selectedItem"
3                  :items="selectItems"
4                  prepend-icon="mdi-calendar"
5+                 label="ラベル"
6                >
7+ <template v-slot:prepend>
8+  <v-icon>mdi-calendar</v-icon>
9+ </template>
10  </v-select>