为什么v-html不呈现html

Question

我正在尝试渲染一些来自api的html。v-html标签将<p>标签输出到页面上，而不是将它们视为html。

这是我正在呈现的数据：

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>"

这是带有v-html的html

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

我也试过了

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

和

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

但它们都在页面上显示段落标记，而不是呈现。

Answer 1

我努力解决了同样的问题，并找到了如下的解决方案；

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

            return elem.body.innerText;
        }
    }