選択したコンポーネントを強調表示するVueJS

Question

私はVueファイルで作業しています。アクティブな要素を強調表示したいのですが、それを達成する最も良い方法は何ですか？ コード

<li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i>Test 1</li>

<li @click = "selectedComponent = 'appBugs2'"><i class="ion-bug"></i>Test 2</li>

<li @click = "selectedComponent = 'appBugs3'"><i class="ion-bug"></i>Test 3</li>

だから最初に "LI" 要素を選択したと言うことができます - "LI"、そしてもう一つは、選択した場合>それは赤の背景を与える必要があり、最初のものをリセットし、新しい選択された要素に赤い背景を割り当てる必要があります。

私はウェブ上で検索しようとしましたが、それについては何もありません。オプションが2つだけあれば簡単ですが、私のリストははるかに大きくなります。では、これを解決する最良の方法は何でしょうか？

Answer 1

このようにすることができます。

<li @click = "selectComponent('appBugs1', $event)"><i class="ion-bug"></i>Test 1</li> 

<li @click = "selectComponent('appBugs2', $event)"><i class="ion-bug"></i>Test 2</li> 

<li @click = "selectComponent('appBugs3', $event)"><i class="ion-bug"></i>Test 3</li> 

次のメソッド追加：

selectComponent: function(component, event){ 
    if(this.activeLink){ 
     this.activeLink.classList.remove('highlight'); 
    } 
    this.activeLink = event.target; 
    this.activeLink.classList.add('highlight'); 

    this.selectedComponent = component; 

を}。

プロパティactiveLink。次に、CSSスタイリングを追加します。

.highlight{ 
    background-color: yellow; 
}