在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循环特定元素

回答

相关问题