title: VueJS - Prevent Default on link click but also capture object
body: <p>I am learning Vue.JS and have run into a bit of a problem. I want the user to be able to click on an <code>&lt;a href="#"&gt;&lt;/a&gt;</code> tag, <code>e.preventDefault()</code>, and also grab the object associated with the link. Here is my code (note that I have <code>@</code> preceding the <code>{{</code> because I am using Blade):</p>
  
  <pre><code>&lt;a href="#"
     class="list-group-item"
     v-repeat="responder: responders"
     v-on="click: showResponder(responder)"&gt;
      &lt;div class="media"&gt;
          &lt;div class="media-left"&gt;
              &lt;img src="" v-attr="src: responder.avatar" alt="" class="media-object"/&gt;
          &lt;/div&gt;
          &lt;div class="media-body"&gt;
              &lt;h4 class="media-heading"&gt;@{{ responder.first_name }} @{{ responder.last_name }}&lt;/h4&gt;
              &lt;p&gt;
                  &lt;strong&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt; Phone:&lt;/strong&gt; @{{ responder.phone }}
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And the Javascript:</p>
  
  <pre><code>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;
          }
      }
  });
  </code></pre>
  
  <p>This works as far as grabbing the <code>responder</code> object but fires the link - I need to be able to both <code>e.preventDefault()</code> AND get the object.</p>
  
  <p>Thanks!</p>