Vuejs Add Router Link With Js Append

Question

var output = `<router-link :to="{name : 'profile' , params : { slug : ${response.data.nickname} }}">
<img src="${response.data.avatar}" class="card__image">
</router-link>`;

$('body').append(output)

In html result;

<router-link :to="{name : 'profile' , params : { slug : omerf }}">
<img src="http://localhost:8000/storage/default.png" class="card__image">
</router-link>

How can I do that like this with append;

<a href="/profile/omerf">
<img src="http://localhost:8000/storage/default.png" class="card__image">
</a>

Answer 1

You can't append router-link to html after Vue is rendered, router-link will be rendered to a tag when Vue loads. try using v-if in your template instead of append in jquery. when you use v-if, item will not be inserted in the document unless your condition is true. you can checkout Vue conditional rendering document: https://vuejs.org/guide/essentials/conditional.html#v-if