はじめに
Vue.jsで動的に追加された要素に対してイベントハンドラをバインドする方法をご紹介します。
良くない例
以下、ポップアップを表示するためのjQueryプラグインMagnific Popupを使ったサンプルです。
See the Pen
sample1 by cr-jojima (@cr-jojima)
on CodePen.
「ホップアップ1」ボタンを押すとポップアップが表示されますが、
「追加」ボタンを押した後に追加された、
「ポップアップ2」以降のボタンを押してもポップアップが表示されません。
これは、mountedのMagnific Popupのイベントハンドラが、
追加された要素にバインドされていないためです。
要素追加時にイベントハンドラをバインド
要素追加時にイベントハンドラをバインドするようにしてみます。
See the Pen
sample2 by cr-jojima (@cr-jojima)
on CodePen.
まずは、要素に対してイベントハンドラをバインドする関数を
methodsに定義します。(ここではbindPopup()と定義)
そして、それをmountedと要素を追加するclickAddButton()で呼ぶようにします。
しかし、これだと追加直後※のボタンを押してもポップアップが表示されません。
※「ポップアップ5」ボタンを追加した場合、
「ポップアップ1~4」ボタンはOKだが、「ポップアップ5」ボタンはNG
要素追加時はDOMが更新された後にバインドを行う必要があります。
nextTickを使う
Vue.jsにおいて、DOMが更新された後に何らかの処理を行いたい場合はnextTickを使います。
See the Pen
sample3 by cr-jojima (@cr-jojima)
on CodePen.
clickAddButton()で呼んでいたbindPopup()を、
nextTickのコールバック関数内で呼ぶようにします。
これでポップアップが表示するようになりました。
