I have an array of strings that I want to transform by turning certain words like "User object", "Promise", etc into clickable links. Here is the initial array:
var strings = ['This returns a promise containing a User Object that has the id', 'next string']
The desired outcome should look like this:
<div class="wrapper">
<div class="item" v-for="str in strings" v-html="str"></div>
</div>
The challenge lies in replacing specific words like "User object", "Promise" and attaching a @click event for my application to handle.
If rendered as intended, it would appear as follows (manually recreated from the previous v-for loop example):
<div class="wrapper">
<div class="item">This returns a <a href="#" @click.prevent="help('promise');">promise</a> containing a <a href="#" @click.prevent="help('User object');">User object</a> that has the id</div>
<div class="item">next string</div>
</div>
I attempted to achieve this with the following method but it did not bind the @click event:
methods: {
linkify(str) {
return str.replace(/user object/, '<a href="#" @click="help">User object</a>');
}
}
Any suggestions?