为什么 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;
        }
    }