Vue components / elements in v-html

I have a post.text data that contains the text of a blog post submitted by the user Much like in Twitter, users can mention other users with the sintax I am tagging @user1 in this post. When rendering the post, I want to replace all the @username instances with links to the page of the mentioned user.

With a regex match / replace I can easily transform the mentioned @username into something like (I’m using vue-router):

I am tagging <router-link :to="{name: 'user', params: {userId: post.userId}}">{{ dPost.user_name }}</router-link> in this post

But when I use it like this:

<p v-html="preparedText"></p>

vue doesn’t reprocess the html to bind its own tags.

How to solve this problem? Thanks

Yeah, v-html is only for actual html, not Vue templates. If you want to use a template, you need to create a component. I’ve made a fiddle here: https://jsfiddle.net/Herteby/9syt27ja/

It only works with the compiler-included version of Vue, not the runtime-only version.

Or you could just use <a> instead of <router-link>.

Hey, the jsfiddle can’t be found at that URL.

If it is still available, and you could share the link, I would really appreciate it.

Thanks!

Hey,

I just got the same problem. Seems like there is no real solution. Or is there?

Since @Herteby’s fiddle doesn’t work anymore:

https://jsfiddle.net/Linusborg/3u3cLpt3/

This fiddle demonstrates how to dynamically create a new component that uses the html string as its template, and otherwise is like a copy of the current component that we render it in (so data, computed, methods etc work)

That is quite elegant, in a way, but I copying the whole component definition seems a bit brittle in some aspects, i.e. properties that we added to our parent component dynamically during created would be missing.

It would be cooler if we could just directly create the necessary vnodes from our template snippet within tjhe context of our current component and then inject them into our template, without having to create a child component dynamically.

This is also possible but the implementation is a bit more verbose and “ugly”:

https://jsfiddle.net/Linusborg/09716p4w/

The nice thing about this is that the rendering of the template snippets happens in the real context of our component, not some dynamically created child component that tries to look and behave as if it was its parent.

So while it doesn’t look as elegant, it’s actually more robust.

I’m interested in find if we use in this v-html element
no this is textarea
anyway when I mention you @LinusBorg or mistakely add a character @LinusBorg1
what happend in vue forum?