Question

请参阅代码

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

问题是，它正在正确添加所选类，但是当我单击另一个项时，它会添加所选项，但不会删除旧项。如何仅保留选中的最新点击项？

谢谢。

Answer 1

在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

我还会注意到，tr内嵌有div个元素，这很奇怪。我认为这只是因为你的例子，但这不是技术上有效的HTML。

Answer 2

我使用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;

在v-for循环内选择vue 2中的特定元素

2 个答案: