Vue では、多くの場合、要素をページに動的に追加する必要があります。ただし、これらの動的に追加された要素のクリック イベントが機能しないことがあります。これはなぜですか?この記事ではその理由と解決策を紹介します。
1. 理由
まず、動的に追加された要素のクリック イベントが機能しない理由を理解しましょう。これは、Vue がページの読み込みプロセス中に既存の要素を監視するためで、クリック イベントが発生すると、Vue インスタンスの対応するメソッドがトリガーされます。ただし、要素を動的に追加する場合、Vue はこれらの要素にリスナーを自動的に追加しないため、クリック イベントは無効になります。
2. 解決策
原因が明らかになったので、この問題をどのように解決すればよいでしょうか?
Vue には、親要素のイベントをリッスンできるイベント委任メカニズムがあり、子要素がクリックされるとイベントが送信されます。オブジェクトの target 属性は、クリックされた特定の要素を決定するために使用されます。このメカニズムを使用すると、動的に追加された要素に対する無効なクリック イベントの問題を解決できます。
たとえば、Vue コンポーネントでは次のように記述できます:
{{item.name}}
上記のコードでは、親要素 この方法では Vue インスタンスにリスナーを一度追加する必要があるため、パフォーマンスの問題が発生する可能性があります。要素を頻繁に動的に追加する必要がある場合、この方法では高いパフォーマンスのオーバーヘッドが発生する可能性があります。 もう 1 つの解決策は、Vue のモディファイアです。 Vue の修飾子を使用して、動的に追加された要素にイベントをバインドできます。 上記のコードでは、 以上がVue が機能しない要素クリック イベントを動的に追加した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。で監視されており、子要素
がクリックされると、
handleClickメソッドがトリガーされます。handleClickメソッドでは、イベント オブジェクトのtarget属性を使用して、どのサブ要素がクリックされたかを判断できます。
{{item.name}}
ログイン後にコピー
@clickイベントを要素にバインドし、## を呼び出しました。 #handleClick
メソッド。要素を動的に追加するときに Vue の応答メカニズムを使用しているため、新しい要素を追加すると、@clickイベントが新しい要素に自動的にバインドされます。この方法の利点は、より便利であることですが、Vue の修飾子は静的な要素とコンポーネントに対してのみ使用可能であり、動的に追加された要素に対しては有効ではないことに注意する必要があります。したがって、この方法は単一のレンダリングにのみ適しています。
3. 結論
上記の 2 つの方法により、Vue で動的に追加された要素の無効なクリック イベントの問題を解決できます。上記は一般的な解決策のほんの 2 つであり、実際には他にも多くの解決策があります。実際の開発では、特定の状況に基づいて最適な技術ソリューションを選択できます。
ソース：php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2024-09-04 07:32:49
2024-09-04 07:30:03
2024-09-04 07:02:32
2024-09-04 07:02:06
2024-09-04 07:00:36
2024-09-04 06:53:01
2024-09-04 06:52:18
2024-09-04 06:50:32
2024-09-04 06:48:09
2024-09-04 06:44:16
最新の問題
function_exists() はカスタム関数を決定できません
Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1089
Google Chromeのモバイル版を表示する方法
こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
9
1172
親ウィンドウには出力がありません
document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
922
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
