Vue.js 2 автоэкранирование HTML

Question

Vue.js 2 автоэкранирование HTML

1

Я использую Vue 2 js с Laravel 5.5.

У меня есть компонент данных - текст уценки. И у меня есть экземпляр vue

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

Строка тела имеет символ ">". Но после присвоения ot экранов <.

Проблема следующая: у меня есть компонент vue, который cconvertts 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>

После назначения тела и unescpe, я не получаю действительного преобразования разметки.

Что я должен делать?

Добавить какой-нибудь компонент? Отказаться от этих символов в экземпляре Vue? Или что-то еще... Просьба, помощь.

Denys Siebov 20 сен. 2017, в 17:37

Источник

0

происходит преобразование из '>' в '<' до того, как оно будет присвоено vue или после? Кроме того, вы пробовали {!! !!} вместо {{}} для отображения необработанной строки, а не экранированной строки?
Justin MacArthur 20 сен. 2017, в 17:21

Теги:

javascript

vuejs2

laravel-5

laravel-5.5

markdown

1 ответ

Ещё вопросы

происходит преобразование из '>' в '<' до того, как оно будет присвоено vue или после? Кроме того, вы пробовали {!! !!} вместо {{}} для отображения необработанной строки, а не экранированной строки?

Krzysztof Atłasik · Accepted Answer · 2017-09-20T16-09-00.000Z

Это лезвийный движок на стороне сервера, который выходит из html, а не Vue. Вам придется использовать {!! $lesson->body !!} {!! $lesson->body !!} вместо {{ $lesson->body }}.

Вы можете принять этот ответ, если это решение работает.