typescript - 如何将事件侦听器注入通过 v-html 生成的 html

Question

我有一些字符串变量 log.htmlContent 形式的 html 内容。我将它传递给一个 div 以通过 v-html 显示。这个 div 仅在 log.htmlContent 包含 img 标签时才会显示（http: 只有在存在 img 标签时才会出现在 log.htmlContent 中）。

<div
    v-html="log.htmlContent"
    v-if="log.htmlContent.includes('http:')"
    class="textContent"
></div>

我想向注入的 img 标签添加一个侦听器，该侦听器将运行一个将 img 标签的 src 内容作为参数传递的函数。这可以用vue吗？如果有怎么办。在此先感谢您的帮助！

标签： typescriptvue.jsvue-cli

Answer 1

弄清楚了！我只需要像这样在 div 中创建一个侦听器

<div
  v-html="log.htmlContent"
  v-if="log.htmlContent.includes('img src')"
  @click="displayFull($event)"
  class="textContent"
></div>

使用 $event 我可以将单击的对象作为参数传递，然后event.target.src在单击时用于获取 img 的 src。