Why is v-html not rendering html

Question

I am trying to render some html coming from an api. The v-html tag is outputting the <p> tags onto the page instead of treating them as html.

This is the data I am rendering:

Bio:"<p>Throughout his PhD and post-doctoral research, Dr David focussed on transdermal medical technology. While presenting his research at a skincare conference, he had his "light-bulb moment" realising the expertise he had developed could be reapplied to solve some of the major challenges facing the global cosmetic skincare industry. </p>"

this is the html with the v-html

<div v-html="decodeURIComponent(teamMember.Bio)"></div>

I also tried

<div v-html="teamMember.Bio"></div>

and

<div v-html="decodeURI(teamMember.Bio)"></div>

but they all show the paragraph tags on the page instead of rendering.

Answer 1

I struggled with the same problem and found the solution like below;

computed: {
        parsedHtml () {
            const parser = new DOMParser();
            const elem = parser.parseFromString(this.teamMember.Bio, 'text/html');

            return elem.body.innerText;
        }
    }