首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >组件呈现后,Vue.js将click事件绑定到v-html内的锚点元素

组件呈现后,Vue.js将click事件绑定到v-html内的锚点元素
EN

Stack Overflow用户
提问于 2021-09-18 08:22:49
回答 1查看 309关注 0票数 2

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

下面是我的组件:

代码语言:javascript
运行
复制
<div class="info-text" v-html="descriptionShown"></div>

EN

回答 1

Stack Overflow用户

发布于 2021-09-18 08:29:52

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

跨度的内容将被替换为rawHtml属性的值,解释为纯

-数据绑定被忽略。请注意,您不能使用v-html来组合模板部分,因为Vue不是一个基于字符串的模板引擎。

此外,这通常被认为是要避免的事情,因为这会让你的网站对XSS注入敞开大门,除非你非常小心地使用v-html属性,并确保它不会触及用户输入的内容。

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

代码语言:javascript
运行
复制
[{text: "Some text content", link: ''},{text: "Followed by a link.", link: "example.com"}]

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69232907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档