bugfix> javascript > 投稿

私はのスタイルをカスタマイズする方法を見つけようとしています <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>

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

    ライブデモ

あなたの答え