使用 v-html 時，點擊事件在 div 內不起作用 - vue js

Question

我有一個 contenteditable div 並使用 v-html 新增原始 html，包括點擊事件。但在這種情況下，點擊事件不起作用。檢查元素顯示 div 上有一個點擊事件，但它仍然不起作用。

如果我在 contenteditable div 中使用點擊事件對任何其他 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

@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')
    }
  }
}

在我看來，這一切都感覺有點混亂。可能有一種更簡單的方法可以實現您的願望。