改變V-select標籤和項目的文字顏色的方法

Question

我一直在嘗試更改v-select標籤和項目的文字顏色，但找不到相應的屬性來實現，我可以更改背景顏色，但無法更改v-select內部的標籤或文字項目。以下是範例程式碼：

<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row align="center">
                <v-col
                 class="d-flex"
                 cols="12"
                 sm="6"
                 >
                 <v-select
                 :items="items"
                 label="Standard"
                 background-color="#000000"
                 color="#ffffff"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 1

您可以使用item插槽來自訂標籤的渲染：

<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
  <template #item="{item}">
    <span style="color:white; background:blue">{{item.name}}<span>
  </template>
</v-select>