Passer un événement et un argument à v-on dans Vue.js

Question

Je passe un paramètre dans v-on:input les directives. Si je ne le passe pas, je peux accéder à l'événement dans la méthode. Existe-t-il un moyen d'accéder à l'événement en passant le paramètre à la fonction ? Je n'utilise pas Vue-Router :

Et ce, sans passer le paramètre. Je peux accéder à l'objet événement

HTML

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

Javascript

  methods: {
    addToCart: function (event) {

      // I need to access the element by using event.target
      console.log('In addToCart')
      console.log(event.target)
    }
  }

C'est lors du passage du paramètre. Je ne peux pas accéder à l'objet événement

HTML

<input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0">

Javascript

  methods: {
    addToCart: function (id) {

      // How can I access the element by using event
      console.log('In addToCart')
      console.log(id)
    }
  }

Voici un extrait du code, qui devrait suffire à reproduire le problème que je rencontre.

https://jsfiddle.net/lookman/vdhwkrmq/

Answer 1

Si vous voulez accéder à l'objet de l'événement ainsi qu'aux données transmises, vous devez passer le code suivant event y ticket.id les deux comme paramètres, comme suit :

HTML

<input type="number" v-on:input="addToCart($event, ticket.id)" min="0" placeholder="0">

Javascript

methods: {
  addToCart: function (event, id) {
    // use event here as well as id
    console.log('In addToCart')
    console.log(id)
  }
}

Voir violon d'Ingres : https://jsfiddle.net/nee5nszL/

Modifié : cas avec vue-router

Dans le cas où vous utilisez vue-router, vous devrez peut-être utiliser $event dans votre v-on:input comme suit :

<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">

Voici le travail violon .

Answer 2

Vous pouvez aussi faire quelque chose comme ça...

<input @input="myHandler('foo', 'bar', ...arguments)">

Evan You lui-même a recommandé cette technique dans un message sur le forum Vue. En général, certains événements peuvent émettre plus d'un argument. Aussi comme les états de la documentation La variable interne $event est destinée à transmettre l'événement DOM original.

Answer 3

Selon les arguments que vous devez passer, en particulier pour les gestionnaires d'événements personnalisés, vous pouvez faire quelque chose comme ceci :

<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>