突出顯示所選組件VueJS

我正在Vue文件中工作，而我想要的是突出顯示活動元素，將會完成它的最佳方法是什麼？代碼突出顯示所選組件VueJS

<li @click = "selectedComponent = 'appBugs1'">Test 1</li>

<li @click = "selectedComponent = 'appBugs2'">Test 2</li>

<li @click = "selectedComponent = 'appBugs3'">Test 3</li>

因此，可以說第一個「禮」元素被選中 - >以「禮」，如果另外一個選擇它應該給紅色背景，它必須重置第一個元素並將紅色背景分配給新選定的元素。

我試圖在網上搜索，但沒有太多關於它的內容，如果您只有2個選項，那麼會很容易，但是我的列表要大得多。那麼解決這個問題的最好方法是什麼？

來源

2017-02-19 Stan

您想在選擇元素的文本或點擊時添加紅色背景嗎？ – NotABlueWhale

現在只是一個點擊。 – Stan

你可以這樣做。

<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; 
}

來源

2017-02-19 12:36:44 NotABlueWhale

它由於某種原因只能使用一次。我按第一個，但是當我嘗試去另一個它說（不能讀屬性'classList'的undefined） – Stan

它可以從任何3個開始，但是一旦你選擇了一個，你不能切換到另一個沒有刷新頁面 – Stan

這可能是由於我的'activeLink'輸入錯誤。 – NotABlueWhale

突出顯示所選組件VueJS

回答

相關問題