VueでClickイベントのハンドラを書く時は大体↓の感じでかく。
<button v-on:click="handleClick">click me</button> methods:{ handleClick: function(arg){ this.count++ this.args = arg }, }
で、引数に何か渡したい場合は↓
<button v-on:click="handleClick(1, $event)">click me</button> methods:{ handleClick: function(arg, event){ this.count++ this.args = arg }, }
通常のeventオブジェクトも↑の感じで渡せる。
で、これをRender使ったときにどう書くかちょっとハマったので記載。
調べても出てこないのよね。みんなこの程度の事にはハマってすらいないんだろうなーと
ちょっと寂しい気持ちになりました。頭悪くてごめんなさい。
で、renderで書く場合、onのハンドラは下の感じでcreateElementに渡す。
createElement('button', {on: {click: handleClick}}, 'ボタン')
普通に引数付きで書くとこう書いちゃう。
createElement('button', {on: {click: handleClick(1)}}, 'ボタン')
コレだとダメ。
オブジェクトはあくまで関数を渡さないといけないので、↑だと関数を呼んじゃってる。
なので、下の感じにする。
createElement('button', {on: {click: (x) => this.handleClick(1, x)}}, '引数とイベント有')
ラムダ式の引数がイベントオブジェクトになってるのでそれをそのまま渡すと。
ハマったハマった。。。
サンプルは↓。