Vue.js 2 个自动转义 HTML

Question

我正在使用 Vue 2 js Laravel 5.5。

我有一个组件数据 - markdown 文本。我有一个 vue 实例

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

正文字符串有一个“>”符号。但是在将 ot 转义为 < .

之后

问题是下一个，我有一个vue组件，它将markdown转换为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>

分配 body 和 unescpe 后，我没有得到有效的 markdown 转换。

我该怎么办？

向组件添加内容？拒绝在 Vue 实例中转义这个字符？或其他...请帮助。

Answer 1

转义html的是服务器端的blade引擎，不是Vue。您将不得不使用 {!! $lesson->body !!} 而不是 {{ $lesson->body }}。

Vue.js 2 个自动转义 HTML

Vue.js 2 autoescape HTML

javascript

laravel-5

vuejs2

markdown

laravel-5.5