web-dev-qa-db-fra.com

Passage d'événement et argument à v-on dans Vue.js

Je passe un paramètre dans les directives v-on:input. Si je ne le passe pas, je peux accéder à l'événement dans la méthode. Est-il possible de toujours accéder à l'événement en passant le paramètre à la fonction? Non pas que j'utilise vue-router:

Ceci est 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 de la transmission 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/

vue.js
91
geckob

Si vous souhaitez accéder à l'objet événement ainsi qu'aux données transmises, vous devez passer event et ticket.id en tant que 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 le violon en marche: https://jsfiddle.net/nee5nszL/

Édité: cas avec vue-router

Si vous utilisez vue-router, vous devrez peut-être utiliser $ event dans votre méthode v-on:input comme suit:

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

Ici fonctionne violon .

152
Saurabh

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

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

Evan You a lui-même recommandé cette technique dans un post sur le forum Vue. En général, certains événements peuvent émettre plus d'un argument. De plus, variable de documentation la variable interne $ event sert à transmettre l'événement DOM d'origine.

11
xpuu