Vue/Vuetify - CSS に変数を使って背景色を変更したい

Question

質問内容

Vuetify の v-select コンポーネントで色の一覧のプルダウンメニューの横にそれに対応した色付きの四角いボックスを表示したいです。

CSS でボックスを作りましたが、現状は背景色が固定されています。
これを red なら赤色のボックス、green なら青色のボックスといったようにアイテム内容に応じた色にしたいのですが、やり方を教えていただけないでしょうか。
「色の名前に対応した色付きの四角いボックスを左に表示したい」というのが目的のため、下記コード以外の方法でも大丈夫です。

よろしくおねがいします。

コード

動作コードは CodePen に置きました。

<div id="app" style="max-width: 300px;">
  <v-app>
    <v-select :items="items">
      <!-- 選択したアイテムの表示 -->
      <template slot="selection" slot-scope="data">
        <span>{{ data.item }}</span>
      </template>
      <!-- アイテム一覧の表示 -->
      <template slot="item" slot-scope="data">
        <span>{{ data.item }}</span>
      </template>
    </v-select>
  </v-app>
</div>

span {
  position: relative;
  padding-left: 25px;
}

span:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  top: 0;
  left: 0;
  background-color: green;  // ここを可変にしたい
}

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      items: ["red", "green", "blue"]
    };
  }
});

Answer 1

思いついた単純な実装ですが一旦回答いたします。

<div id="app" style="max-width: 300px;">
  <v-app>
    <v-select :items="items">
      <!-- 選択したアイテムの表示 -->
      <template slot="selection" slot-scope="data">
        <span>
          <span class="colorBox" :style="{backgroundColor: data.item}"></span>
          {{ data.item }}
        </span>
      </template>
      <!-- アイテム一覧の表示 -->
      <template slot="item" slot-scope="data">
        <span>
          <span class="colorBox" :style="{backgroundColor: data.item}"></span>
          {{ data.item }}
        </span>
      </template>
    </v-select>
  </v-app>
</div>

span.colorBox {
  display: inline-block;
  width: 15px;
  height: 15px;
}

Comments

[tiitoi]

理想通りの見た目になりました。ご回答いただきありがとうございます。