

Vue の v-select において、特定の選択肢(または文字列)の文字の色を変えたいのですが、何か方法があるでしょうか。  
v-select タグ内で

[code]

    <v-select
      :items="hoge"
      item-color="green"
    ></v-select>
    
[/code]

としても、選択時に色が変わるだけでクリックしてプルダウンを表示した際に色が変わるわけではありません。  
しかも、要求としては特定の選択肢についてのみなので、条件式を v-select 内ないしどこかに導入する必要があると思います。

Vuetify v-select API props:  
<https://vuetifyjs.com/ja/api/v-select/#props>

**補足** ：  
プルダウン(v-select)の選択肢のには文字列(VARCHAR)の配列を渡します。特定の文字列だった場合、色を変えたいです。


CC BY-SA 4.0
2021-03-11T07:28:17.047
74585
2021-03-11T16:26:57.300
2021-03-11T07:39:02.097
36372
36372
question
html vue.js
Vue の v-select において、特定の選択肢の文字の色を変えたい


いくつかやり方はあると思いますが、特定の値の場合にclassを付けるようにしました  
vuetifyにラベルカラーを変えるプロパティは見つからないので生成されるclass(`.v-select__selections`)を指定して詳細度を上げています

以下のコードではFoo選択時に赤色に変わります

[code]

    <template>
      <v-app>
        <v-container fluid>
          <v-select
            v-model="item"
            :items="items"
            :class="getSelectColor"
          ></v-select>
        </v-container>
      </v-app>
    </template>
    
    <script>
    export default {
      data: () => ({
        item: "",
        items: ["Foo", "Bar", "Fizz", "Buzz"],
      }),
      computed: {
        getSelectColor() {
          if (this.item === "Foo") {
            return "change-color";
          } else {
            return "";
          }
        },
      },
    };
    </script>
    
    <style>
    .change-color .v-select__selections {
      color: red;
    }
    </style>
    
[/code]


CC BY-SA 4.0
2021-03-11T16:26:57.300
74599
2021-03-11T16:26:57.300
298
74585
answer