渲染组件后，Vue.js将单击事件绑定到v-html中的锚元素[重复]

Posted 2023-02-26

【中文标题】渲染组件后，Vue.js将单击事件绑定到v-html中的锚元素[重复]

【英文标题】：Vue.js bind click event to anchor element inside v-html after component rendered [duplicate]

【发布时间】：2021-09-18 08:22:48

【问题描述】：

我有一个文本，里面有链接。但是我在呈现视图后添加了这些链接（锚元素）（我从服务器获取链接信息并为每个单词插入锚元素）。每个链接都调用了我的容器内的一个函数，但我猜是因为链接是在渲染后插入到页面的，所以它们不会绑定到模型方法。渲染后如何获取绑定到方法的这些链接点击事件？

这是我的组件：

<div class="info-text" v-html="descriptionShown"></div>

【问题讨论】：

检查this

是的，它与 Igor 提供的链接相同，效果很好。

【参考方案1】：

很遗憾，您不能这样做。 Vue 的 v-html 指令将内容绑定为原始 HTML，而不是您通常使用的 vue 模板语法，这意味着 vue 不会解释任何数据绑定，例如事件。来自 Vue 指南：

span 的内容将被替换为 rawHtml 属性，解释为纯 HTML - 数据绑定是 忽略。请注意，您不能使用 v-html 来编写模板部分， 因为 Vue 不是基于字符串的模板引擎。

此外，这通常被认为是要避免的事情，因为这会使您的网站容易受到 XSS 注入，除非您非常小心如何使用 v-html 属性并确保它永远不会触及用户输入的内容。

最好的办法是根据需要将数据解析为对象或数组，并由具有 v-for 循环或类似的组件处理，数据作为道具传递。 例如。你可能有这样的事情：

[text: "Some text content", link: '',text: "Followed by a link.", link: "example.com"]

让组件使用 v-for 对其进行操作，然后根据链接内容或您想要定义的任何其他属性生成纯文本或锚标记，例如使用 $emit 发出特定事件('eventName') 可以捕获调用组件的位置。

【讨论】：

不错的答案，但我会选择伊戈尔的答案。