使用 v-html 时,点击事件在 div 内不起作用 - vue js
P粉521013123
P粉521013123 2024-03-25 20:48:41
0
1
504

我有一个 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");
}

P粉521013123
P粉521013123

全部回复(1)
P粉212114661

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板