Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

Question

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

I have a string variable named log.htmlContent that contains some HTML content. This variable is passed into a div to be displayed using v-html. The particular div will only be displayed if log.htmlContent includes an img tag (http: will only be present in log.htmlContent if there is an img tag).

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

I am interested in adding a listener to the injected img tag that will trigger a function passing the src content of the img tag as a parameter. Is this achievable with vue? If so, how can it be done? Thank you in advance for your assistance!

typescript vue.js vue-cli

Answer 1

Answer №1

If you want to extract the src tag from your log.htmlContent, one approach is to create a watcher for it. This way, when a new image is added, you will have access to the string containing the img tag.

To set up a watcher, follow these steps:

watch: {
  log.htmlContent: function(val) {
    //You can now process and extract the src tag here
    alert(val);
  }
}

You can check out the implementation in this fiddle: https://jsfiddle.net/7yde4faz/1/

You can now go ahead and retrieve the src tag from the content.

Answer 2

If you want to extract the src tag from your log.htmlContent, one approach is to create a watcher for it. This way, when a new image is added, you will have access to the string containing the img tag.

To set up a watcher, follow these steps:

watch: {
  log.htmlContent: function(val) {
    //You can now process and extract the src tag here
    alert(val);
  }
}

You can check out the implementation in this fiddle: https://jsfiddle.net/7yde4faz/1/

You can now go ahead and retrieve the src tag from the content.

Answer 3

Answer №2

Finally got it! I just had to set up a listener in the div like this

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

Using $event allowed me to pass the clicked object as a parameter and then utilize event.target.src to retrieve the src of the image when clicked.

Answer 4

Finally got it! I just had to set up a listener in the div like this

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

Using $event allowed me to pass the clicked object as a parameter and then utilize event.target.src to retrieve the src of the image when clicked.

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

Answer №1

Answer №2

Similar questions

Creating an array inside a Vue function

A guide on passing array data from axios.get() to a parent component in Vue and exporting a bar chart with the rendered data

Loop through the information retrieved from the alertController

Bringing together projects utilizing varying Typescript versions within Visual Studio 2015

What is the best way to import a JSON file in VueJs without the need for compilation?

Challenge with sharing an array from a different component in Angular using @Input()

Encountering the error message "express.default is not a function" while attempting to start the node server within a container

Apollo Client's useQuery function is causing unnecessary refetches when using Next.js' router.push method

Using Typescript to import an npm package that lacks a definition file

Utilize switchMap to sequence calls

Retrieve every occurrence of a Vue component and execute a separate function on each one

What is the best way to retrieve the output value using the EventEmitter module?

What are some solutions for resolving the 'ERR_OSSL_EVP_UNSUPPORTED' error in a Vue application?

Leverage TypeScript generics to link props with state in a React class-based component

What is the best method to retrieve HTTP headers from the backend and simultaneously send HTTP parameters to it in ASP.NET Core and Angular?

The link function fails to execute

Unable to utilize the useState hook in TypeScript (Error: 'useState' is not recognized)

What is the best method to eliminate a "0" entry from a javascript event array?

What is the reason for sending a single file to the server?

Sending properties via react router link in TypeScript