2015-10-16 62 views
8

我有多個列表項,當他們被點擊時,我想切換活動類。Vuejs獲取某個事件正在調用的元素?

<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

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

我的問題是如何選擇被點擊,並呼籲與setFilter方法,具體li元素?

我想爲已被點擊(或未點擊)的每個單個li元素設置活動類falsetrue的變量。

回答

6

您可以直接在您的功能中傳遞事件和事件目標。 目標是您點擊的元素。

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'); 
+0

就在我的例子一個簡單的問題我用這個: 點擊:使用setfilter(「風格」,「PILS」) 因爲我通過參數的事件處理程序沒有按沒有工作。我如何使它像一個帶有參數的函數一樣工作我是否以某種方式將事件作爲參數傳遞? –

+1

不要嘗試傳遞元素本身和參數。 您可以從onClick-Method調用setFilter並分析您點擊的元素。 – psren

+0

這似乎不適用於Vue 2.0。我嘗試使用* v-on:click =「bla();」*像文檔建議一樣,但是在工作時,發送的事件是未定義的。 –

相關問題