javascript - VueJS - Prevent Default on link click but also capture object -
i learning vue.js , have run bit of problem. want user able click on <a href="#"></a>
tag, e.preventdefault()
, , grab object associated link. here code (note have @
preceding {{
because using blade):
<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>
and javascript:
var vm = new vue({ el: "#respondercontainer", data: { activeresponder: null, responders: [] }, methods: { showresponder: function(responder) { // here wish prevent // link firing default action responder.preventdefault(); this.activeresponder = responder; } } });
this works far grabbing responder
object fires link - need able both e.preventdefault()
, object.
thanks!
the documentation shows can pass $event event object
http://vuejs.org/guide/events.html
<button v-on="click: submit('hello!', $event)">submit</button> /* ... */ { methods: { submit: function (msg, e) { e.stoppropagation() } } } /* ... */
so want v-on attribute be
v-on="click: showresponder(responder,$event)"
and function definition
showresponder: function(responder,e)
Comments
Post a Comment