L'événement de clic ne fonctionne pas dans div lors de l'utilisation de v-html - vue js

Question

J'ai un contenteditable div 并使用 v-html ajoutant du HTML brut, y compris les événements de clic. Mais dans ce cas, l'événement click ne fonctionne pas. L'inspection de l'élément montre qu'il y a un événement click sur le div mais cela ne fonctionne toujours pas.

Si je code en dur un autre div avec un événement click dans contenteditable div alors cela fonctionne. Je ne sais pas si je fais ça correctement. :

<div id="div_textarea2" v-html="temp_testing_div2" contenteditable="true"></div>


   data () {
    return {
          temp_testing_div2: `<div @click="ClickLine">Click this</div>`,

}
}


   ClickLine(){
   alert("Clicked");
}

Answer 1

@HermantSah v-html 不会绑定任何 Vue 指令，例如 @clickévénement. Voir la documentation ici.

Une solution de contournement pourrait consister à définir l'événement @click sur le div parent et à donner à l'élément quelque chose de distinctif, comme un identifiant, dans la chaîne du modèle.
Vous pouvez ensuite intercepter cet événement et vérifier sur quel élément vous avez cliqué. Si l'élément correspond à un élément de la chaîne du modèle, faites quelque chose, etc. Voici un exemple approximatif.

...  
// in your script section
data() {
  return {
    temp_testing_div2: `
Click this
`,
  }
},
methods: {
  handleLineClick(e) {
    let clickedElId = e.target.id
    if (clickedElId === 'temp_testing_div2') {
      console.log("temp_testing_div2 clicked!", e)
    } else {
      console.log('another element was clicked')
    }
  }
}

Tout cela semble un peu déroutant à mon avis. Il existe peut-être un moyen plus simple de réaliser votre souhait.