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

【问题标题】：How do I inject an event listener to html generated via v-html如何将事件侦听器注入通过 v-html 生成的 html
【发布时间】：2019-11-03 11:35:14
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

一种方法是在您的log.htmlContent 上创建一个观察者，当有新图像进入时，您的字符串将包含您的img 标记。然后你应该可以得到你的src 标签。

以下是设置观察者的方法：

watch: {
  log.htmlContent: function(val) {
    //Here you do the job to get your src tag
    alert(val);
  }
}

我在下面的小提琴中完成了这项工作：https://jsfiddle.net/7yde4faz/1/

我会让你找回src标签。

【讨论】：

【解决方案2】：

想通了！我只需要像这样在 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。

【讨论】：