In my case, I am replacing a link on top of paragraph element using v-html
Please find the code snippet as follows
<p v-html="websiteHTML"></p>
where websiteHTML contains: <a v-bind:href="google.com/">Google</a>
The <p> tag is being rendered with Google but doesn't have hyperlink to navigate to https://www.google.com/
Could you please help in finding the error?
The HTML string you include in your variable should just be HTML, not Vue template code. When you tried including vue template directives, the framework wrote the anchor tag into the DOM with the literal attribute "v-bind:href" instead of the desired "href":
new Vue({
el: '#app',
data: {
websiteHTMLNo: '<a v-bind:href="https://google.com/">Google</a>', // <-- won't work
websiteHTMLYes: '<a href="https://google.com/">Google</a>' // <-- do this instead
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-html="websiteHTMLNo"></p>
<p v-html="websiteHTMLYes"></p>
</div>(If you actually do need to inject template code instead of plain HTML, you need to use Vue.compile instead of v-html to parse it.)
if you want to pass a var inside your link.
const url: string = 'https://google.fr/'
const html: string = `<a href="${url}">Google</a>`
<p v-html="html"></p>
I had a similar problem with v-html.
In my case, I received an array of objects in JSON format from an API, although I did JSON.Parse(object), I couldn't receive the data and after a lot of head-scratching, I discovered that it was the name of the properties of my object that in Json was returned in lowercase and in my object it started in uppercase...
work... export default interface Info { prio: Prio expires?: Date | null html: string }
don't work... export default interface Info { Prio: Prio Expires?: Date | null Html: string }
<a href="https://google.com">Google</a>? If you don't tell Vue to include the link, it won't.