Vue.jsでv-onにイベントと引数を渡す


158

パラメータを渡します v-on:inputディレクティブで。渡さない場合は、メソッドでイベントにアクセスできます。関数にパラメーターを渡すときに、イベントにアクセスできる方法はありますか?私がvue-routerを使用しているわけではありません:

これは、パラメーターを渡さない場合です。イベントオブジェクトにアクセスできます

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)
    }
  }

これは、パラメーターを渡す場合です。イベントオブジェクトにアクセスできません

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)
    }
  }

これはコードの一部ですが、私が抱えている問題を再現するのに十分なはずです

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

回答:


241

渡されたデータだけでなくイベントオブジェクトにもアクセスする場合は、次のようにeventticket.id両方をパラメーターとして渡す必要があります。

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)
  }
}

動作するフィドルを参照してください:https//jsfiddle.net/nee5nszL/

編集:vue-routerのケース

vue-routerを使用している場合 は、v-on:input次のようにメソッドで$ eventを使用する必要がある場合があります。

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

ここで作業フィドルです。


10
試しましたが、エラーメッセージが表示されますProperty or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option
geckob

@geckob HTMLからイベントを渡しました:v-on:input
Saurabh

これが関連しているかどうかは
わかり

7
@Saurabh @geckobエラーを回避するには、特別な$event変数をメソッド呼び出しに渡す必要がありますv-on:input="addToCart($event, num)"
williamukoh

2
合格$eventしないでくださいevent
マイケルトランキダ

20

次のようなこともできます...

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

Evan You自身が、Vueフォーラムの1つの投稿でこのテクニックを推奨しています。一般に、一部のイベントは複数の引数を発行する場合があります。また、ドキュメントに記載されているように、内部変数$ eventは元のDOMイベントを渡すためのものです。


jsfiddle.net/50wL7mdz/30115 * .vueコンポーネントを使用するとスプレッド構文が変換されますが、ブラウザー内コンパイルを使用すると変換されないことに注意してください。
ИльяЗеленько

2
「...引数」と「$イベント」の違いはありますか?
ラファエル

@Raphael違いがあります!「$ event」引数を使用すると、イベントから1つの引数のみを渡します。
Piotr Dawidiuk

6

渡す必要がある引数に応じて、特にカスタムイベントハンドラーでは、次のようなことができます。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.