Использование v-html в цикле blaach foreach [Vue warn]: ошибка компиляции шаблона - PullRequest
Новая
       4

Использование v-html в цикле blaach foreach [Vue warn]: ошибка компиляции шаблона

0 голосов
/ 27 октября 2019

Я пытаюсь использовать vues v-html в цикле блейд-foreach: 

@foreach($entries as $entry)
    <a href="/entry/{{$entry->id}}"><h3>{{ $entry->created_at->toRfc822String() }}</h3></a>
    <div v-html="<p>hello world</p>">

    </div>
    <hr>
@endforeach

Когда я это делаю, я получаю эту ошибку:

[Vue warn]: Ошибка компиляции шаблона:

недопустимое выражение: неожиданный токен '<' в </p> 

<p>hello world</p>

Необработанное выражение: v-html = "

hello world

"

Причина, по которой я хочу использовать v-html, заключается в том, что я намерен использовать метод для вывода уценки, например <div v-html="marked({{$entry-content}})">

1 Ответ

1 голос
/ 27 октября 2019

Предполагая, что marked является методом, объявленным в экземпляре Vue, вы можете заключить в кавычки интерполированное содержимое, но сначала преобразуйте все символы в нем в соответствующие объекты HTML. Например, 

<div v-html="marked('{{ htmlentities($entry->content) }}')">

Я предлагаю записать это в модель как вычисляемое свойство. 

class Entry extends Model {
    protected $appends = ['content_html']

    getContentHtmlAttribute() {
        return htmlentities($this->content);
    }
}

Затем используйте вычисленное поле в своем шаблоне, 

<div v-html="marked('{{ $entry->content_html }}')">
...