Question

124

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

rated 0 times [ 130] [ 6] / answers: 1 / hits: 5797 / 4 Years ago, wed, november 18, 2020, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ernest

Add To Favorites

Follow

Total Points: 332

Total Questions: 92

Total Answers: 98

Location: Armenia

Member since Sat, Dec 31, 2022

1 Year ago

ernest questions

1 typescript extending types vs interfaces

Sat, Jun 12, 21, 00:00, 3 Years ago

1 Why Am I Getting Uncaught TypeError: Cannot read property 'style' of null

Wed, Jan 13, 21, 00:00, 3 Years ago

1 TypeScript is not picking up my custom type definitions in tsconfig

Sat, Nov 28, 20, 00:00, 4 Years ago

1 parse multipart JSON with Multer

Tue, Sep 22, 20, 00:00, 4 Years ago

1 Fix discord music bot queue

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 4 Years ago raymondorlandok · Accepted Answer

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