web-dev-qa-db-fra.com

VueJS - Empêcher la valeur par défaut lors du clic sur le lien mais également capturer l'objet

J'apprends Vue.JS et j'ai rencontré un peu de problème. Je veux que l'utilisateur puisse cliquer sur une balise <a href="#"></a>, e.preventDefault(), et également saisir l'objet associé au lien. Voici mon code (notez que j'ai @ Précédant le {{ Parce que j'utilise 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>

Et le 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;
        }
    }
});

Cela fonctionne jusqu'à saisir l'objet responder mais déclenche le lien - j'ai besoin de pouvoir à la fois e.preventDefault() ET récupérer l'objet.

Merci!

javascripthtmlvue.js
22
NightMICU

documentation montre que vous pouvez passer $ event pour obtenir l'objet événement

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

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

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

Vous voulez donc que l'attribut v-on soit

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

et la définition de la fonction d'être

showResponder: function(responder,e)
24
Patrick Evans

Alternativement, dans Vue 1.x, vous pouvez également utiliser le modificateur d'événement.prevent:

HTML:

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

Vous pouvez également arrêter la propagation:

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

JS:

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