如何在通过循环获得的元素的click事件上绑定类? [英] How to bind a class on click event of elements obtained through a loop?

问题描述

我遍历对象数组以在html中显示一些可选的信息框.为此，我在事件单击中绑定了一个类，但是当我通过v-for获取元素时，当我选择一个元素时，便将该类绑定到所有元素上.

I go through an array of objects to display in my html some information boxes that are selectable. For it I bind a class in the event click, but as I obtain the elements through a v-for, when I select one it bind the class to all of them.

如何仅区分所选的?

我已经看到jquery的几个示例，但是我想知道是否还有其他方法.

I have seen several examples with jquery but I would like to know if there is any other method.

我的模板:

<div class="list-services">
  <div class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ focusService }" 
    @click="focusService = !focusService"
  >
    <div class="service-name">
      {{estimation.name}}
    </div>
    <div class="service-description">
      {{estimation.description}}
    </div>
    <div class="service-price">
      {{estimation.price}} 
      <span class="price-currency">€</span>
    </div>
  </div>
</div>

非常感谢您的时间和帮助.

Thank you very much for your time and help.

推荐答案

我试图制作一个jsfiddle来回答您的问题，但是后来我在vue.js论坛上找到了这个jsfiddle:

I was trying to make a jsfiddle to answer your question, but then I found this jsfiddle on the vue.js forum: https://jsfiddle.net/mogtfpze/2/

它提供了三种不同的选项，可通过单击来突出显示内容.

It offers three different options for highlighting content by clicking.

li v-for="item in items" 
  :class="{highlight:item.id == selected}" 
  @click="selected = item.id">
  {{item.id}}
</li>

尽管这是一个古老的答案，但我认为它仍应与当前的Vue版本兼容.

Although it's an old answer, I believe it should still be compatible with the current Vue version.

如果没有，或者不清楚的地方，请告诉我，我会尽力帮助您！

If not, or if something is not clear, just let me know and I'll try to help you out!

这篇关于如何在通过循环获得的元素的click事件上绑定类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！