Click-Ereignis funktioniert in div nicht, wenn v-html – vue js verwendet wird

Question

Ich habe ein contenteditable div 并使用 v-html, das rohes HTML einschließlich Klickereignissen hinzufügt. In diesem Fall funktioniert das Click-Ereignis jedoch nicht. Die Untersuchung des Elements zeigt, dass es ein Klickereignis für das Div gibt, aber es funktioniert immer noch nicht.

Wenn ich ein anderes Div mit Klickereignis in contenteditable div fest codiere, funktioniert es. Ich weiß nicht, ob ich das richtig mache. :

<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 事件。请参阅此处的文档。

解决方法可能是在父 div 上设置 @click 事件，并在模板字符串中为元素提供可区分的内容，例如 id。
然后您可以拦截该事件并检查单击了哪个元素。如果该元素与模板字符串中的元素匹配，请执行某些操作等。下面是一个粗略的示例。

...  
// 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')
    }
  }
}

在我看来，这一切都感觉有点混乱。可能有一种更简单的方法可以实现您的愿望。