Vuetify - 如何自定義選項的樣式<v-select> ?

Question

我試圖找到一種方法來自定義<v-select>選項的樣式。 我想根據選項的值提供不同的backgroundColor 。 所有提供的:items都將被修復（始終相同），因此我需要找到一種方法來通過其特定的文本值或聲明唯一的類/ID 來檢測選項。 什么是最好的方法？ 謝謝你。

當前代碼：

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

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

現場演示