Vue.jsで動的に追加された要素に対してイベントハンドラをバインドする方法

はじめに

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のコールバック関数内で呼ぶようにします。

これでポップアップが表示するようになりました。


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です