Vue.jsで選択した箇所のclassを変更する方法

前提

• Vue.js ... 2.6.10

解決方法

Vue.jsのフォーラムに記載がありました。
英語を読むことができる方は以下を参考にしていただければと。

forum.vuejs.org

上記では3通り記載がありますが、私が利用した方法を書きます。
フォーラムに記載があった回答を参考に作成したものです。

基本的な考え方

Vue.jsでクラスの値を動的に変更する方法は、公式ドキュメントに記載があります。
こちらを最初に読むと良いかと思います。

jp.vuejs.org

修正するソースコード

修正は三箇所で必要です。

• JS（レンダラー側）
• HTML
• CSS

JS

Vue.jsで、選択されたことを保持する変数が必要になります。
今回はitemSelectedとしました。

new Vue({
  el: '#vue',
  data: {
      items: [{id: 1}, {id: 2}, {id: 3}, {id:4}],  // サンプルデータ用
      itemSelected: 0,
  }
})

HTML

選択した際に、変数に値を入れ、classを選択できるようにします。

    <div id="vue">
      <ul>
        <li v-for="item in items" 
             :class="{highlight:item.id == itemSelected}" 
             @click="itemSelected = item.id">
          {{item.id}}
        </li>
      </ul>
    </div>

ヘッダやフッタは省略しています。

CSS

CSSでは選択された時に呼ばれるクラスを定義します。

li.highlight {
  background: blue;
}

これで動作します。

課題

複数選択も実装を考えているのですが、上記の応用が必要そうです。。

背景

Electron + Vue.jsでアプリを作成しています。
で、特定の要素を選択した際に、色を変更したいと思ったのですが、簡単に実装できなかったので、今回まとめました。