Que dois-je faire si Vue ajoute dynamiquement des événements de clic d'élément qui ne fonctionnent pas ?

Dans Vue, nous devons souvent ajouter dynamiquement des éléments à la page. Cependant, nous constatons parfois que les événements de clic de ces éléments ajoutés dynamiquement ne fonctionnent pas. Pourquoi ? Cet article vous présentera les raisons et les solutions.

1. Raison

Comprenons d'abord pourquoi l'événement de clic des éléments ajoutés dynamiquement ne fonctionne pas. En effet, Vue surveillera les éléments existants pendant le processus de chargement de la page. Lorsqu'un événement de clic se produit, la méthode correspondante sur l'instance Vue sera déclenchée. Cependant, lorsque nous ajoutons des éléments de manière dynamique, Vue n'ajoute pas automatiquement d'écouteurs à ces éléments, donc l'événement click n'est pas valide.

2. Solution

Maintenant que la cause a été clarifiée, comment résoudre ce problème ?

1. Utilisation du mécanisme de délégation d'événements de Vue

Vue dispose d'un mécanisme de délégation d'événements qui peut écouter les événements sur l'élément parent Lorsqu'un élément enfant est cliqué, l'élément spécifique sur lequel il a cliqué peut être déterminé via l'attribut cible de l'objet événement. Nous pouvons utiliser ce mécanisme pour résoudre le problème des événements de clic invalides sur les éléments ajoutés dynamiquement.

Par exemple, dans notre composant Vue, nous pouvons écrire comme ceci :

<template>
  <div class="parent" @click="handleClick">
    <div class="dynamic-element" v-for="item in list" :key="item.id">{{item.name}}</div>
  </div>
</template>

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

Dans le code ci-dessus, nous avons surveillé les clics sur l'élément parent <div class="parent"> Event, lorsque l'élément enfant <div class="dynamic-element"> est cliqué, la méthode handleClick sera déclenchée. Dans la méthode handleClick, nous pouvons utiliser l'attribut target de l'objet événement pour déterminer sur quel élément enfant a été cliqué. <div class="parent">上监听了点击事件，当子元素<div class="dynamic-element">被点击时，就会触发handleClick方法。在handleClick方法中，我们可以通过事件对象的target属性来判断具体被点击的子元素是哪个。

由于该方式需要在Vue实例上添加一次监听器，因此在性能方面可能存在问题。如果您需要频繁地动态添加元素，这种方式可能会带来较高的性能开销。

2. 利用Vue的修饰符

另一种解决方案是Vue的修饰符。我们可以使用Vue的修饰符来为动态添加的元素绑定事件。

<template>
  <div>
    <div class="dynamic-element" v-for="item in list" :key="item.id" @click="handleClick">{{item.name}}</div>
  </div>
</template>

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

以上代码中，我们为<div class="dynamic-element">元素绑定了@click事件，并在其中调用了handleClick方法。由于我们已经在动态添加元素时使用了Vue的响应式机制，因此当我们添加新的元素时，它会自动为新元素绑定上@click

Utiliser les modificateurs de Vue

Une autre solution consiste à utiliser les modificateurs de Vue. Nous pouvons utiliser les modificateurs de Vue pour lier des événements à des éléments ajoutés dynamiquement.

rrreee🎜Dans le code ci-dessus, nous avons lié l'événement @click à l'élément <div class="dynamic-element"> et avons appelé handleClick méthode. Puisque nous avons utilisé le mécanisme réactif de Vue lors de l'ajout dynamique d'éléments, lorsque nous ajoutons un nouvel élément, il liera automatiquement l'événement <code>@click au nouvel élément. 🎜🎜L'avantage de cette méthode est qu'elle est plus pratique, mais il convient de noter que les modificateurs de Vue ne sont disponibles que pour les éléments et composants statiques, et ne sont pas valables pour les éléments ajoutés dynamiquement. Par conséquent, cette méthode ne convient qu’au rendu unique. 🎜🎜3. Conclusion🎜🎜Grâce aux deux méthodes ci-dessus, nous pouvons résoudre le problème des événements de clic invalides des éléments ajoutés dynamiquement dans Vue. Les solutions ci-dessus ne sont que deux solutions courantes. En fait, il existe de nombreuses autres solutions. En développement réel, vous pouvez choisir la solution technique qui vous convient le mieux en fonction de votre situation spécifique. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!