在VUE 2選擇內部V-for循環特定元素

請查看代碼在VUE 2選擇內部V-for循環特定元素

<div v-for="msg in leftMsg"> 
    div v-if="msg.last_sender" @click.prevent="loadMsg(msg)"> 
    <tr :class="['active',{ 'seens' : !msg.seen, 'selected':msg.isActive}]"> 
     // some html 
    </tr> 
    </div> 
</div> 

loadMsg(obj){ 
    obj.isActive = !obj.isActive; 
}

的問題是，它是正確選擇添加類，但是當我點擊其他項目它增加了選擇，但不刪除舊的。我如何只保留最近點擊的項目？

謝謝。

來源

2017-08-03 sadek

添加數據屬性的msg對象的外部，並且用它來跟蹤活動消息。

data(){ 
    return { 
    activeMessage: null, 
    ... 
    } 
}

然後在您的模板中，設置activeMessage。

<div v-for="msg in leftMsg"> 
    <div v-if="msg.last_sender" @click.prevent="activeMessage = msg"> 
    <tr :class="['active',{ 'seens' : !msg.seen, 'selected': msg === activeMessage}]"> 
     // some html 
    </tr> 
    </div> 
</div>

我改變了這裏的關鍵部分是@click.prevent="activeMessage = msg"和'selected': msg === activeMessage。這會將activeMessage設置爲點擊消息，然後selected類將應用於activeMessage，並將只有適用於activeMessage。

我還會注意到，你有一個嵌套在div內的tr元素很奇怪。我認爲這只是因爲你的例子，但這不是技術上有效的HTML。

來源

2017-08-03 14:50:01 Bert

我已經使用for循環解決了這個問題。我認爲這可能會有所幫助。爲了刪除所有其他以前的活動類，您需要運行for循環並將它們設爲false，然後將active = true指定給最新的類。

下面是代碼，其可以幫助

 // make all other selected class false first 
      for(let i=0; i<this.leftMsg.length; i++){ 
        this.leftMsg[i].isActive=false; 

      } 
      /*now making the newest one active*/ 
      obj.isActive = true;

來源

2017-08-03 14:21:33 sadek

在VUE 2選擇內部V-for循環特定元素

回答

相關問題