Как вставить текст с HTML Код с Vue. js

Question

У меня есть данные в моем MySQL с кодом HTML.

Пример:

<b>William Shakespeare</b> was an English poet.

Мне нужно вставить этот текст в Vue. js Компонент.

Мой код:

  mounted() {
    axios
      .get(MY API)
      .then(response => (this.author = response.data))
      .catch(error => error("error"));
  }

А затем:

<p class="card-text">
    {{author.description}}
</p>

Проблема в том, что теги в описании не интерпретируются, и он показывает HTML теги.

Answer 1

Используйте директиву v-html в своем парапрафе:

<p class="card-text" v-html="author.description" />

Но БУДЬТЕ ОСТОРОЖНЫ относительно возможности XSS-атаки, если author.description будет содержать предоставленный пользователем данные.