Vue が機能しない要素クリック イベントを動的に追加した場合はどうすればよいですか?

Vue では、多くの場合、要素をページに動的に追加する必要があります。ただし、これらの動的に追加された要素のクリック イベントが機能しないことがあります。これはなぜですか?この記事ではその理由と解決策を紹介します。

1. 理由

まず、動的に追加された要素のクリック イベントが機能しない理由を理解しましょう。これは、Vue がページの読み込みプロセス中に既存の要素を監視するためで、クリック イベントが発生すると、Vue インスタンスの対応するメソッドがトリガーされます。ただし、要素を動的に追加する場合、Vue はこれらの要素にリスナーを自動的に追加しないため、クリック イベントは無効になります。

2. 解決策

原因が明らかになったので、この問題をどのように解決すればよいでしょうか?

1. Vue のイベント委任メカニズムの使用

Vue には、親要素のイベントをリッスンできるイベント委任メカニズムがあり、子要素がクリックされるとイベントが送信されます。オブジェクトの target 属性は、クリックされた特定の要素を決定するために使用されます。このメカニズムを使用すると、動的に追加された要素に対する無効なクリック イベントの問題を解決できます。

たとえば、Vue コンポーネントでは次のように記述できます:

<template>
  <div>
    <div>{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {id: 1, name: &#39;元素1&#39;},
        {id: 2, name: &#39;元素2&#39;},
        {id: 3, name: &#39;元素3&#39;},
      ]
    }
  },
  methods: {
    handleClick(e) {
      if (e.target.classList.contains(&#39;dynamic-element&#39;)) {
        console.log(e.target.innerText)
      }
    }
  }
}
</script>

上記のコードでは、親要素 <div class="parent"> で監視されており、子要素 <code><div class="dynamic-element"> がクリックされると、<code>handleClick メソッドがトリガーされます。 handleClick メソッドでは、イベント オブジェクトの target 属性を使用して、どのサブ要素がクリックされたかを判断できます。

この方法では Vue インスタンスにリスナーを一度追加する必要があるため、パフォーマンスの問題が発生する可能性があります。要素を頻繁に動的に追加する必要がある場合、この方法では高いパフォーマンスのオーバーヘッドが発生する可能性があります。

2. Vue のモディファイアの使用

もう 1 つの解決策は、Vue のモディファイアです。 Vue の修飾子を使用して、動的に追加された要素にイベントをバインドできます。

<template>
  <div>
    <div>{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {id: 1, name: &#39;元素1&#39;},
        {id: 2, name: &#39;元素2&#39;},
        {id: 3, name: &#39;元素3&#39;},
      ]
    }
  },
  methods: {
    handleClick() {
      console.log(&#39;点击了动态元素&#39;)
    }
  }
}
</script>

上記のコードでは、@click イベントを <div class="dynamic-element"> 要素にバインドし、## を呼び出しました。 #handleClick<code> メソッド。要素を動的に追加するときに Vue の応答メカニズムを使用しているため、新しい要素を追加すると、@click イベントが新しい要素に自動的にバインドされます。 この方法の利点は、より便利であることですが、Vue の修飾子は静的な要素とコンポーネントに対してのみ使用可能であり、動的に追加された要素に対しては有効ではないことに注意する必要があります。したがって、この方法は単一のレンダリングにのみ適しています。

3. 結論

上記の 2 つの方法により、Vue で動的に追加された要素の無効なクリック イベントの問題を解決できます。上記は一般的な解決策のほんの 2 つであり、実際には他にも多くの解決策があります。実際の開発では、特定の状況に基づいて最適な技術ソリューションを選択できます。