Ich lerne Vue.JS und bin in ein kleines Problem geraten. Ich möchte, dass der Benutzer in der Lage ist, auf ein <a href="#"></a>
-Tag, e.preventDefault()
, zu klicken und auch das mit dem Link verknüpfte Objekt zu greifen. Hier ist mein Code (Anmerkung, die ich habe @
vor dem {{
weil ich Klinge bin mit):VueJS - Standard bei Link-Klick verhindern, aber auch Objekt erfassen
<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>
Und das 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;
}
}
});
Das funktioniert so weit wie die responder
Objekt greifen, aber feuert die Link - Ich muss in der Lage sein, beide e.preventDefault()
UND bekommen das Objekt.
Danke!
Danke! Ich folge tatsächlich dem Laracasts.com Tutorial dazu, entweder sind wir noch nicht so weit gekommen oder ich habe es verpasst;) Wird die Dokumente noch etwas durchforsten. Vue ist großartig! – NightMICU