How to convert data from HTML editor to HTML on the page?

Question

I have project which is build from main page and admin panel. On my admin panel I have Vue2Editor - HTML editor. So, when I write something, it goes to DB and then that data is shown on main page, but there is a problem.

The example of data looks like that:

  {
    "id": "04c47128-de82-459c-acb5-c8d99c61bbe6",
    "content_tip": "<h3>Some random text</h3>",
    "created_at": "2021-10-17T11:53:03.000Z",
    "updated_at": "2021-10-17T11:53:03.000Z"
  },

As you can see content_tip field value looks like simple HTML, but on page I see as simple text, so, how can I convert that <h3>Some random text</h3> into real HTML on page.

Nikola Pavicevic · Accepted Answer · 2021-10-17 12:08:21Z

1

You need to use v-html directive :

new Vue({
  el: '#demo',
  data() {
    return {
       item: {
        "id": "04c47128-de82-459c-acb5-c8d99c61bbe6",
        "content_tip": "<h3>Some random text</h3>",
        "created_at": "2021-10-17T11:53:03.000Z",
        "updated_at": "2021-10-17T11:53:03.000Z"
      },
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
   <div v-html="item.content_tip"></div>
</div>

answered Oct 17, 2021 at 12:08

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How to convert data from HTML editor to HTML on the page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related