How to render html from database in Vue

Question

I am making a blog app using Vue.js for frontend and Node.js for backend.

I am using a rich text editor (vue2-editor) in frontend for users to create the content of the blog. I want to store that content in the database (MySQL) and retrieve it. Currently whatever content I am storing is going as a plain HTML.

<p><strong>This is Blog Heading</strong></p><p><br></p><p><u>This is underlined</u></p><p><br></p><p>This is start of the paragraph</p>

And after retrieving from the database it renders is as a string and not HTML

How can I get it to display the HTML properly?

tony19 · Accepted Answer · 2022-07-15 00:36:39Z

12

Use v-html to display it as html and not a string.

You can read more about it here:

https://v2.vuejs.org/v2/guide/syntax.html

Example:

<div v-html="htmlFromDb" />

edited Jul 15, 2022 at 0:36

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 8, 2020 at 8:36

T. Short

3,62417 silver badges30 bronze badges

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

4 Comments

Jack Giratina Over a year ago

Thanks.. I tottaly forgot it..Btw can you tell me..is it okay to store the html in database? what i mean is "is it the right way of implementing"?

T. Short Over a year ago

There is nothing dangerous about storing html inside a DB. However, the danger can come when you display it in the users browser. For example, if you store malicious javascript in your DB nothing will happen. But when it is loaded in users browsers it could do some harm. So maybe add some checks and make sure only people you trust/now what they are doing can store the html.

Jack Giratina Over a year ago

Ok Thanks.. and sorry to bother you one more time.. But I have one last question.. if the user adds to many images and text.. will it affect my database? I mean, in terms of size. and what should be the column's type in the database for storing such content. I have set the the column's type to TEXT in mysql.

Hardik Raval Over a year ago

You should not store images to your database instead store path. that way there will be no size issue. for long texts TEXT is a good choice.

Intsab Haider · Accepted Answer · 2020-01-08 09:40:00Z

1

Providing you a solution as per my knowledge hope it will help you. Please have a look on code.

<p><strong>This is Blog Heading</strong></p>
<p><br></p>
<p><u>This is underlined</u></p>
<p><br></p>
<p>This is start of the paragraph</p>

edited Jan 8, 2020 at 9:40

Intsab Haider

3,6013 gold badges25 silver badges32 bronze badges

answered Jan 8, 2020 at 8:38

Ankit Rathore

111 bronze badge

Collectives™ on Stack Overflow

How to render html from database in Vue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related