javascript - Vuetify - How do I customize styles of option in <v-select>? - Stack Overflow

admin管理员组

文章数量:1398766

I'm trying to find a way to customize the style of <v-select> options. I want to provide different backgroundColor depending on options' value. All of provided :items will be fixed (always the same), so I need to find a way to either detect options via its specific text value or by declaring unique class/id. What would be the best approach for this? Thank you.

Current Code:

<v-select
   :items="[
      'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.
   ]"
>
</v-select>

HERE is a link to my desired oute example.

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.grey {
  background-color: grey;
}

<select>
  <option>Choose</option>
  <option class="yellow">Yellow Backgrond</option>
  <option class="blue">Blue Background</option>
  <option class="grey">Grey Background</option>
</select>

I'm trying to find a way to customize the style of <v-select> options. I want to provide different backgroundColor depending on options' value. All of provided :items will be fixed (always the same), so I need to find a way to either detect options via its specific text value or by declaring unique class/id. What would be the best approach for this? Thank you.

Current Code:

<v-select
   :items="[
      'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.
   ]"
>
</v-select>

HERE is a link to my desired oute example.

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.grey {
  background-color: grey;
}

<select>
  <option>Choose</option>
  <option class="yellow">Yellow Backgrond</option>
  <option class="blue">Blue Background</option>
  <option class="grey">Grey Background</option>
</select>

• javascript
• css
• vue.js
• material-design
• vuetify.js

Share Improve this question Follow edited Nov 18, 2020 at 21:42 Boussadjra Brahim 1 asked Nov 18, 2020 at 20:07 passionateLearnerpassionateLearner 80811 gold badge1010 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could use slot item as follows :

  <v-select :items="items" label="Standard">
            <template #item="{item}">
              <span :class="[{'yellow':item.includes('yellow')},
                    {'blue':item.includes('blue')},{'grey':item.includes('grey')}]"> 
                      {{item}}</span>
           </template>

  </v-select>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items:[ 'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.,
    ]
  }),
})

LIVE DEMO

本文标签： javascriptVuetifyHow do I customize styles of option in ltvselectgtStack Overflow