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

Question

我有一些以字符串变量log.htmlContent形式出现的html内容。我将其传递给div以通过v-html显示。该div仅在log.htmlContent包含img标签时才显示（如果存在img标签，http：仅在log.htmlContent中显示）。

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

我想向注入的img标签添加一个侦听器，该侦听器将运行一个将img标签的src内容作为参数传递的函数。 vue是否可能？如果是这样的话。在此先感谢您的帮助！

Answer 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标签。

Answer 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。