Vuetify - Как мне настроить стили опции в ?

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

#javascript #css #vue.js #материал-дизайн #vuetify.js

Вопрос:

Я пытаюсь найти способ настроить стиль <v-select> параметров. Я хочу предоставить разные backgroundColor значения в зависимости от значения параметров. Все предоставленные :items параметры будут исправлены (всегда одинаковыми), поэтому мне нужно найти способ либо определять параметры по их определенному текстовому значению, либо объявлять уникальный класс / идентификатор. Каков наилучший подход для этого? Спасибо.

Текущий код:

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

ВОТ ссылка на мой пример желаемого результата.

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

Ответ №1:

Вы могли бы использовать слот item следующим образом :

   <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.,
    ]
  }),
})

ЖИВАЯ ДЕМОНСТРАЦИЯ