वूज को उस तत्व को प्राप्त किया जा रहा है जिसे किसी ईवेंट द्वारा बुलाया जा रहा है?

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> 

मैं पहले से ही एक setFilter क्लिक समारोह जहां मैं कक्षा onClick सक्रिय करने के लिए अतिरिक्त कार्यक्षमता जोड़ सकते हैं की है।

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

मेरे सवाल यह है कि विशिष्ट li तत्व यह है कि पर क्लिक किया गया था और setFilter विधि के साथ कहा जाता है का चयन कर सकते है?

मैं प्रत्येक एकल 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> 

जे एस:

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

अपने तत्व के साथ आप आप क्या चाहते हैं कर सकते हैं। उदाहरण के लिए, यदि आप jQuery का उपयोग करें:

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