How to add router-link in vue js dynamically

Question

I am facing a very interesting problem. I am returning some html from server as json. My return html string look like this

str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"

This is returned from server. Now I want to add some spa link.

It can be nuxt link, @click event for routing or a </router-link>

I am using v-html in my front end to out put html. It does output correctly.

Is there anyways of doing this?

Thank you.

I don't understand why you don't just get your server to return that data in a structured JSON like {"link":"/profile/..." and re-construct HTML markup within Vue (which is generally the point of SPAs) — shrumm
– shrumm, Commented Dec 22, 2018 at 8:47
Yap this is one solution I can do with some for loop in vue. — Hkm Sadek
– Hkm Sadek, Commented Dec 22, 2018 at 8:58
If you generate the HTML from your server, then whatever solution you come up with would be a hack to parse the string and extract the data you want. You're then fighting the framework, impacting performance + making things harder for yourself. Just send structured JSON =) — shrumm
– shrumm, Commented Dec 22, 2018 at 9:12

Hammerbot · Accepted Answer · 2018-12-22 11:25:42Z

2

As said in the comments, it's way better to respond from your server with structured JSON data. However, you can make it work, but you need to use a <component></component>. Just using v-html won't work if you have router-link:

<div id="app">
  <component :is="{template: theString}"></component>
</div>

new Vue({
    el: '#app',
  data: {
    theString: '<h3>Something Cool</h3>'
  }
})

https://jsfiddle.net/to8smxfb/

PS: You also need to make sure that theString only contains one root element. You can wrap your string into <div></div> for example.

answered Dec 22, 2018 at 11:25

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add router-link in vue js dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related