组件呈现后，Vue.js将click事件绑定到v-html内的锚点元素
提问于 2021-09-18 00:22:49
我有一个文本，里面有链接。但是我在呈现视图之后添加了这些链接(锚元素)(我从服务器获取链接信息并为每个单词插入锚元素)。每个链接都调用了我的容器中的一个函数，但我猜是因为这些链接是在呈现之后插入到页面中的，所以它们不会绑定到模型方法。如何在渲染后将这些链接的点击事件绑定到该方法？
下面是我的组件：
<div class="info-text" v-html="descriptionShown"></div>
回答 1
Stack Overflow用户
发布于 2021-09-18 00:29:52
不幸的是，你不能这样做。vue的v-html指令将内容绑定为原始HTML，而不是您通常使用的vue模板语法，这意味着vue不会解释任何数据绑定，例如事件。来自vue指南：
跨度的内容将被替换为rawHtml属性的值，解释为纯
-数据绑定被忽略。请注意，您不能使用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')发出特定事件，您可以捕获组件被调用的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69232907
复制
腾讯云开发者
