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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>