我有一个 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");
}
【问题讨论】：
@HermantSah v-html 不会绑定任何 Vue 指令，例如 @click 事件。请参阅文档here。
一种解决方法可能是在父 div 上设置 @click 事件，并在模板字符串中为元素提供可区分的内容，例如 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')
}
}
}
在我看来，这一切都感觉有点混乱。可能有更简单的方法可以实现您的愿望。
【讨论】：