V-HTML具有“ v-on：click”行，但呈现为纯HTML

Question

我有我的

setItems(observableArrayList)

我想在此v-html中插入一个v-on：click，并使用这样的自定义功能

v-html="customButtons"

上面的

^代码将传递给<div class="v-m-button"> <button type="button" id="btn-cancel" class="btn btn-sm btn-success" v-on:click="saveButtonClick()"> <span>Save</span> </button> </div> v-html标记

谢谢我！

Answer 1

我遇到了同样的问题，以下是我找到的解决方案：

• 在 Vue 2 上，this article 可能对某些人有所帮助：https://www.programmersought.com/article/53615036178/
• 在 Vue 3 上，我成功使用了这个库 over there。

然而，正如其他地方的其他人所提到的，这样做如此困难是有充分理由的。也许安全原因对您来说不是一个大问题。但是，假设您的应用不断发展并被广泛使用，以至于性能成为您的主要关注点；那么你可能想使用 Svelte 而不是 Vue 来重建你的前端。然后，您 API 发送的 html 中的所有 @click=this...（vue 特定代码）将几乎无法被 Svelte 应用程序使用，此时您可能会告诉自己：
“将它们作为 json 元数据发送并构建适当的接口会更简单，而不是试图通过强行支持不良数据结构来'赢得时间'。”