VueJS - लिंक क्लिक पर डिफ़ॉल्ट रोकें लेकिन ऑब्जेक्ट को कैप्चर करें

Question

मैं Vue.JS सीख रहा हूं और किसी समस्या का सामना कर रहा हूं। मैं चाहता हूं कि उपयोगकर्ता <a href="#"></a> टैग, e.preventDefault() पर क्लिक करने में सक्षम हो, और लिंक से जुड़े ऑब्जेक्ट को भी पकड़ ले।

<a href="#" 
        class="list-group-item" 
        v-repeat="responder: responders" 
        v-on="click: showResponder(responder)"> 
        <div class="media"> 
         <div class="media-left"> 
          <img src="" v-attr="src: responder.avatar" alt="" class="media-object"/> 
         </div> 
         <div class="media-body"> 
          <h4 class="media-heading">@{{ responder.first_name }} @{{ responder.last_name }}</h4> 
          <p> 
           <strong><i class="fa fa-phone"></i> Phone:</strong> @{{ responder.phone }} 
          </p> 
         </div> 
        </div> 
        </a> 

और जावास्क्रिप्ट:

var vm = new Vue({ 
      el: "#responderContainer", 
      data: { 
       activeResponder: null, 
       responders: [] 
      }, 
      methods: { 
       showResponder: function(responder) 
       { 
        // Here is where I wish to prevent the 
        // link from actually firing its default action 
        responder.preventDefault(); 
        this.activeResponder = responder; 
       } 
      } 
     }); 

यह responder वस्तु हथियाने के रूप में जहाँ तक काम करता है लेकिन आग यहाँ मेरी कोड (ध्यान दें कि मैं @ पूर्ववर्ती {{ है क्योंकि मैं ब्लेड का उपयोग कर रहा है) लिंक - मुझे e.preventDefault() दोनों में सक्षम होने और ऑब्जेक्ट प्राप्त करने की आवश्यकता है।

धन्यवाद!

Answer 1

documentation से पता चलता आप $ घटना पारित घटना वस्तु

http://vuejs.org/guide/events.html

<button v-on="click: submit('hello!', $event)">Submit</button> 

/* ... */ 
{ 
    methods: { 
    submit: function (msg, e) { 
     e.stopPropagation() 
    } 
    } 
} 
/* ... */ 

तो तुम वी-ऑन विशेषता

v-on="click: showResponder(responder,$event)" 

होना चाहते हैं पाने के लिए कर सकते हैं और फ़ंक्शन परिभाषाहोनी चाहिए

एचटीएमएल:

<a v-on:click.prevent="showResponder(responder)">...</a> 

आप प्रसार के रूप में अच्छी तरह से रोक सकता है:

<a v-on:click.prevent.stop="showResponder(responder)">...</a> 

showResponder: function(responder,e) 

Answer 2

वैकल्पिक रूप से, Vue 1.x में, आप भी event modifier.prevent इस्तेमाल कर सकते हैं जेएस:

... 
      showResponder: function(responder) 
      { 
       // No need to prevent any more 
       this.activeResponder = responder; 
      } 
...