How to run a function whenever unknown anchor tags are clicked in Vue.js 3?-CodePudding

I have a div with v-html that displays data from a database:

<div id="Content" v-html="${Content}"></div>

Within the ${Content} that is presented, there can be any number of a tags with links to other external pages. I need to parse these and then add an @click handler to each of them. An example would be:

<p>Calm down, Marty, I didn't disintegrate anything. The <a href="example.com/m">molecular structure</a> of Einstein and the car are completely intact. They wanted me to build them a bomb, so I took their <a href="example.com/d">plutonium</a> and in turn gave them a shiny bomb case full of used pinball machine parts.

To transform into this:

<p>Calm down, Marty, I didn't disintegrate anything. The <a @click="validateLink()" href="example.com/m">molecular structure</a> of Einstein and the car are completely intact. They wanted me to build them a bomb, so I took their <a @click="validateLink()" href="example.com/d">plutonium</a> and in turn gave them a shiny bomb case full of used pinball machine parts.

Or alternatively, just instruct Vue.js to run validateLink() whenever any a tag is clicked within the div id="Content" tag.

I can get all the a tags within the div like such:

const AnchorTags = document.getElementById('Content').getElementsByTagName('a');

But I am at a loss of how to then get the validateLink() function to run on click of these tags.

CodePudding user response：

Content of v-html is treated as plain HTML - you cannot place Vue directives inside.

Luckily for you this specific problem can be solved easily using event delegation e.g. attaching the handler to the parent element inspecting the target (clicked) element...

const app = Vue.createApp({
  data() {
    return {
      html: `<p>Calm down, Marty, I didn't disintegrate anything. The <a href="example.com/m">molecular structure</a> of Einstein and the car are completely intact. They wanted me to build them a bomb, so I took their <a href="example.com/d">plutonium</a> and in turn gave them a shiny bomb case full of used pinball machine parts.`
    }
  },
  methods: {
    onClick(ev) {
      if(ev.target.tagName === 'A') {
        console.log('Anchor clicked -', ev.target.href)
      }
      
    }
  }
})
app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <div v-html="html" @click.stop.prevent="onClick">
  </div>
</div>