When working with Vue components, I receive dynamic messages from the server:
module.exports = {
data() {
return: { windowText: '' }
},
methods: {
showCancelEntrieWindow(){
this.$http.post('/page', {'number' : '123'})
.then(response => {
responseText = response.data.message;
this.windowText = responseText.replace(
new RegExp("class='action'", 'g'),
'v-on:click="myclick"'
);
});
},
myclick(){
console.log('clicked!');
}
}
};
The message contains a link with the class "action".
For example:
response.data.message = 'Some text... <a class="action" href="/test">test</a>';
In the template:
<div v-html="windowText"></div>
I want to add a click handler function to this link. However, directly editing the response.data.message is not an option.
I attempted to modify the response by replacing the class attribute like this:
this.windowText = responseText.replace(
new RegExp("class='action'", 'g'),
'v-on:click.stop="myclick"'
);
Unfortunately, this approach did not work as expected. Can anyone provide assistance on how to achieve this?
Additionally, please keep in mind that direct modification of response.data.message is not allowed.