I want to change the color of the characters for a particular choice in v-select of Vue.

I'd like to change the color of the characters in a particular choice (or string) in Vue's v-select. Is there any way?

in the v-select tag

<v-select
  —items="hoge"
  item-color="green"
</v-select>

However, the color changes only when you select it, but not when you click to display the pulldown.
Furthermore, since the request is only for a specific choice, I think we need to introduce a conditional expression in or somewhere in v-select.

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

Supplementary:
For the pull-down (v-select) option, pass an array of strings (VARCHAR).If it is a specific string, I want to change the color.

html vue.js

2022-09-30 19:40

1 Answers

I think there are several ways to do this, but I tried to add a class for a specific value.
I can't find the property to change the label color in vuetify, so I'm specifying the class (.v-select__selections) that will be generated to increase the detail

The code below changes to red when Foo is selected

<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>

2022-09-30 19:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656