Vuejs得到一个事件正在调用的元素？ [英] Vuejs getting the element that is being called by an event?

问题描述

我有多个列表项，我想在点击它们时切换活动类。

I have multiple list items that I want to toggle active classes on when they are being clicked on.

<ul class="list-body">
    <li v-on="click: setFilter('style', 'pils')" v-class="active: isActive">Pils</li>
    <li>Dubbel</li>
    <li>Tripel</li>
    <li v-on="click: setFilter('style', 'Quadrupel')">Quadrupel</li>
    <li>Wit</li>
</ul>

我已经有一个 setFilter 点击功能我可以添加额外的功能来激活类 onClick 。

I already have a setFilter click function where I can add extra functionality to activate the class onClick.

setFilter: function(facet, value) {
    // Facet for style of beer(search filter)
    this.helper.addDisjunctiveFacetRefinement(facet, value).search();
},

我的问题是如何选择具体的 li 点击的元素并使用 setFilter 方法调用？

My question is how can select the specific li element that was clicked on and called the with setFilter method?

我想要为每个单独的 li false 或 true 的变量单击（或未单击）的$ c>元素。

I want to set a variable for the active class false or true for each single li element that has been clicked (or not clicked).

推荐答案

您可以直接传递事件和事件目标你的功能。
目标是您点击的元素。

You can directly pass the event and the events target in your function. The target is the element you clicked on.

HTML：

<ul id="demo">
    <li v-on="click: onClick">Trigger a handler</li>
    <li v-on="click: n++">Trigger an expression</li>
</ul>

JS：

var vue = new Vue({
  el: '#demo',
  data: {},
  methods: {
    onClick: function (e) {
      var clickedElement = e.target;
    }
  }
})

使用您的元素，您可以做您想做的事。
例如，如果你使用jQuery：

With your element you can do what you want. For example, if you use jQuery:

$(clickedElement).siblings().removeClass('active');
$(clickedElement).addClass('active');

这篇关于Vuejs得到一个事件正在调用的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！