3

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.

2

1 Answer 1

9

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.

3
  • Thanks, Orkhan Alikhanov. Data comes from a JSON API made from a MySQL view.
    – WalterV
    Commented May 8, 2020 at 1:22
  • 1
    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 Commented May 8, 2020 at 1:30
  • Thanks, Orkhan Alikhanov. I understood what you meant. Contents are made by me.
    – WalterV
    Commented May 8, 2020 at 1:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.