Vuejsはイベントによって呼び出されている要素を取得していますか？

Question

アクティブなクラスがクリックされたときに、そのクラスを切り替えたい複数のリスト項目があります。

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

私はすでに、私はクラスonClickを有効にするには、余分な機能を追加することができsetFilterクリック機能を持っています。

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

私の質問はをクリックしてsetFilter方法で呼び出された特定のli要素を選択することができる方法ですか？

li要素ごとに、アクティブクラスの変数を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の使用している場合：私は、引数にイベントハンドラのdoesnを通過しているためのSetFilter（「スタイル」、「ピルス」） ：私はこれを使用して私の例ではちょうど簡単な質問

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