BootstrapVueでb-form-selectの中のoptionに個別にCSSをあてる

はじめに

BootstrapVueを使用していて、プルダウンの中の色を条件によって変えたくなったけど方法がよくわからなかったので備忘録。

私の場合、個別にグレーアウトにしたくて、まず公式リファレンスを見たんですけど…

disabledには簡単にできるみたいですけど、私は色を変えたいだけなんですよ。
そんなことしたいと思わないですよね。うんうん。。
私はしたい。

こんなかんじに。

やり方

たぶん普通にプルダウンリストを出すと、こんな書き方するんじゃないかな～と思います。
簡潔でらくちんですよね。これにCSSあてられたらよかったんですけど…

<b-form-select
    :options="testlist"
    value-field="testId"
    text-field="testNm"></b-form-select>

でもこれだと中身のoptionタグにクラスを持たせられないので、下記のようにoptionを分けてかきます。
そうするとclassをあてられるようになるので。
Vue.jsのガイドにあるこれですね。

そう、べた書きです。

<b-select>
    <option :class="{ 'select-option': changeColor(v.testId) }"
    :value="v.testId"
    v-for="(v, i) in testList"
    :key="i" >
    {{v.testNm}}
    </option>
</b-select>

こう書いたらあとはあてたいCSSを書いて、

.select-option {
    background-color: #e2e6ea;
    color: rgb(108, 117, 125);
}

条件書いて（これはテスト用なので好きに書いてね）、

changeColor(testId){
  if (testId == 2){
    return true;
  }
  return false;
}

おしまい！
以下雑なテストデータ。適当に試してね。

testList:[
    {testId: 0, testNm: ''},
    {testId: 1, testNm: '白'},
    {testId: 2, testNm: '灰'},
    {testId: 3, testNm: '白'},
    {testId: 4, testNm: '白'},
]