Vuejs 获取事件调用的元素？

Question

我有多个列表项，我想在它们被点击时激活 classes。

<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 点击功能，我可以在其中添加额外的功能来激活 class onClick。

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

我的问题是如何 select 单击并调用 with setFilter 方法的特定 li 元素？

我想为每个已单击（或未单击）的 li 元素的活动 class false 或 true 设置一个变量。

Answer 1

您可以直接在函数中传递事件和事件目标。目标是您单击的元素。

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:

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

Vuejs 获取事件调用的元素？

Vuejs getting the element that is being called by an event?

javascript

jquery

json

vue.js