Menu
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?
833
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
What if you want something in between? This is where vue-sanitize comes in. Not only will it allow you to use a whitelist of "safe" HTML tags, it will remove disallowed tags rather than escaping them.
If you have $v in your HTML codes, definitely, the code makes use of Vuelidate for form validations. $event is a special object used to store and retrieve events by Vue.js .
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" />
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
