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> 

И Javascript:

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 объект, но пожары link - Мне нужно иметь возможность как 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-на атрибуте быть

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

и определение функции должно быть

showResponder: function(responder,e) 

Answer 2

В качестве альтернативы, в Вью 1.x, вы можете также использовать event modifier.prevent:

HTML:

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

Вы могли бы остановить распространение, а также:

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

JS:

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