How to insert text with HTML Code with Vue.js

Question

I have some data in my MySQL with HTML code.

Example:

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

I need to insert this text into a Vue.js Component.

My code is:

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

And then:

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

The problem is the tags into the description aren't interpreted and it shows the HTML tags.

v-html directive

Christian Carrillo
– Christian Carrillo

2020-05-08 01:11:30 +00:00
Commented May 8, 2020 at 1:11 — Christian Carrillo
– Christian Carrillo, Commented May 8, 2020 at 1:11
Use v-html directive

Orkhan Alikhanov
– Orkhan Alikhanov

2020-05-08 01:11:33 +00:00
Commented May 8, 2020 at 1:11 — Orkhan Alikhanov
– Orkhan Alikhanov, Commented May 8, 2020 at 1:11

tony19 · Accepted Answer · 2022-07-16 00:40:21Z

10

Use v-html directive on your parapraph:

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

But BE VERY CAREFUL about the possibility of XSS attack if author.description is going to contain user provided data.

edited Jul 16, 2022 at 0:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 8, 2020 at 1:17

Orkhan Alikhanov

10.2k4 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wav Over a year ago

Thanks, Orkhan Alikhanov. Data comes from a JSON API made from a MySQL view.

Orkhan Alikhanov Over a year ago

My warning is about who inserts the data into the database. Because if the plain html is inserted by user, then he can, instead of <p>William..., insert <script>/// malicious code... and that malicious code will be run every time in a user's browser visiting the page that renders it with v-html. That malicious script can do anything on behalf of the user

wav Over a year ago

Thanks, Orkhan Alikhanov. I understood what you meant. Contents are made by me.

Collectives™ on Stack Overflow

How to insert text with HTML Code with Vue.js

Example:

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related