Vue.js 2 autoescape HTML

Question

I'm using Vue 2 js with Laravel 5.5.

I have a component data - markdown text. And I have an vue instance

new Vue({
        el : '#lesson_edit',
        data :  {
            lesson : {
                body : `{{ $lesson->body }}`
           }
        }
    });

Body string has a '>' symbol. But after assign ot escapes to < .

The problem is the next,I have a vue component, which cconverts markdown to html

    <template>
        <div v-html="parsedBody"></div>
    </template>


<script>

    export default {
        props : ['body'],
        mounted() {
            console.log('Component mounted.')
        },
        computed : {
            parsedBody(){
                return marked(this.body, { sanitize: true })
            }
        }
    }
</script>

After assigning body and unescpe, I don't get a valid markdown conversion.

WHat should I do?

Add somethin to component? Refuse this chars escaping in Vue instance? Or somethin else... Pleas, help.

Answer 1

It is blade engine on server side which escapes html, not Vue. You will have to use {!! $lesson->body !!} {!! $lesson->body !!} instead of {{ $lesson->body }} .