使用 v-html 时，点击事件在 div 内不起作用 - vue js

Question

我有一个contenteditable div并添加原始 html，包括使用的单击事件v-html。但在这种情况下，点击事件不起作用。检查元素显示 div 上有一个单击事件，但它仍然不起作用。

如果我对任何其他带有点击事件的 div 进行硬编码，contenteditable div那么它就可以工作。不知道我这样做是否正确。:

<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

@HermantSahv-html不会绑定任何 Vue 指令，例如@click事件。请参阅此处的文档。

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

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

...  
// in your script section
data() {
  return {
    temp_testing_div2: `<div id="temp_testing_div2">Click this</div>`,
  }
},
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')
    }
  }
}

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