Vuejs dostaje element, który jest wywoływany przez zdarzenie?

Question

Mam wiele elementów listy, które chcę włączyć włączone klasy, kiedy są klikane.

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

Mam już funkcji setFilter kliknij gdzie mogę dodać dodatkowe funkcje do aktywacji klasę onClick.

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

Moje pytanie brzmi: w jaki sposób można wybrać konkretny li element, który został kliknięty na i nazywa się z setFilter metody?

Chcę ustawić zmienną dla aktywnej klasy false lub true dla każdego pojedynczego elementu li, który został kliknięty (lub nie został kliknięty).

Answer 1

Możesz bezpośrednio przekazać zdarzenie i cel wydarzeń w swojej funkcji. Celem jest element, który kliknąłeś.

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; 
    } 
    } 
}) 

Z elemencie można robić, co chcesz. Na przykład, jeśli używasz jQuery:

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