Add Vue click event to HTML string fetched via API - vue.js

Question

I have some HTML string that I get via API. Let’s say it looks like:
const msg = 'Lorem ipsum dolor sit google
consectetur adipiscing elit yahoo
lorem ipsum.'
Now I need to add Vues #click event on those a elements. Is it possible to parse somehow the string and add the Vue event on it and output it?
Basically I have an electron app and I want to some additional logic on the links other then redirect.

Answer 1

You do not need to use v-html here. You can parse the string easily using node-html-parser. Then you can use a v-for to show the html
Codesandbox
Code:
<template>
<div id="app">
<div>a tags go below</div>
<div v-for="(tag, key) of a_tags" :key="key">
<a :href="tag.attributes.href">{{ tag.text}}</a>
</div>
<button #click="showTags">show tags</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { parse } from "node-html-parser";
const msg =
'Lorem ipsum dolor sit google consectetur adipiscing elit yahoo lorem ipsum.';
const tags = parse(msg);
export default {
name: "App",
components: {
HelloWorld
},
mounted() {
console.log(tags);
},
data() {
return {
a_tags: [tags.childNodes[1], tags.childNodes[3]]
};
},
methods: {
showTags() {
console.log(this.a_tags);
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Answer 2

EDIT AFTER CHECKING THE FIDDLE:
It seems that appending the refs to the string is not working, therefore, you should put a ref to the parent as follows:
<div id="app">
<div v-html="msg" ref="msg">
</div>
</div>
And then add the event to each of its two children in this case as follows:
new Vue({
el: "#app",
data: {
msg: 'Lorem ipsum dolor sit google consectetur adipiscing elit yahoo lorem ipsum.'
},
mounted() {
this.$refs.msg.children[0].onclick = function(e) {
e.preventDefault();
alert('foo')
};
this.$refs.msg.children[1].onclick = function(e) {
e.preventDefault();
alert('bar')
};
}
})