Tengo un proyecto que se construye desde la página principal y el panel de administración. En mi panel de administración tengo Vue2Editor - editor HTML. Entonces, cuando escribo algo, va a DB y luego esos datos se muestran en la página principal, pero hay un problema.
El ejemplo de datos se ve así:
{ "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" }, Como puede ver, el valor del campo content_tip parece HTML simple, pero en la página lo veo como texto simple, entonces, ¿cómo puedo convertir ese <h3>Some random text</h3> en HTML real en la página?
Necesita usar la directiva v-html :
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>