Как внедрить прослушиватель событий в HTML, созданный с помощью v-html

Question

У меня есть html-контент в виде строковой переменной log.htmlContent. Я передаю его в div для отображения через v-html. Этот div, в частности, отображается только в том случае, если log.htmlContent содержит тег img (http: будет появляться в log.htmlContent только при наличии тега img).

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

Я хотел бы добавить прослушиватель к введенному тегу img, который будет запускать функцию, которая передает содержимое src тега img в качестве параметра. Возможно ли это с помощью vue? Если так, как. Заранее спасибо за помощь!

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, чтобы получить src img при нажатии.

Answer 2

Один из способов сделать это - создать наблюдатель на вашем 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.