One of the challenges I'm facing involves handling data from a blog post, specifically the user-submitted text stored in post.text. Similar to Twitter, users can mention other users using syntax like I am tagging @user1 in this post. My goal is to automatically convert these mentions into links that direct to the page of the mentioned user when rendering the post.
To achieve this, I thought of using regex match/replace to transform @username instances into something similar to the following (using vue-router):
I am tagging <router-link :to="{name: 'user', params: {userId: post.userId}}">{{ dPost.user_name }}</router-link> in this post
However, when attempting to display the prepared text with:
<p v-html="preparedText"></p>
Vue doesn't seem to reprocess the HTML to bind its own tags. How can I address this issue effectively? Any suggestions would be greatly appreciated. Thank you.