Using v-html in blade foreach loop [Vue warn]: Error compiling template

Question

I'm trying to use vues v-html in a blade foreach loop:

@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

When I do that I get this error:

[Vue warn]: Error compiling template:

invalid expression: Unexpected token '<' in
<p>hello world</p>
Raw expression: v-html="
hello world
"

The reason I want to use v-html is because I intend to use a method to output markdown like <div v-html="marked({{$entry-content}})">

The raw html should be quoted as well <div v-html="'<p>hello world</p>'"></div> — Oluwafemi Sule
– Oluwafemi Sule, Commented Oct 27, 2019 at 8:23
@OluwafemiSule That works, but how would I get <div v-html="marked({{$entry->content}})"> to work properly? — user3325126
– user3325126, Commented Oct 27, 2019 at 8:28

Oluwafemi Sule · Accepted Answer · 2019-10-27 08:54:34Z

1

Assuming marked to be a method declared in Vue instance, you can quote the interpolated content but first convert all the characters in it to corresponding HTML entities. For example,

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

I suggest to write this in the model as a computed property.

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

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

Then use the computed field in your template,

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

edited Oct 27, 2019 at 8:54

answered Oct 27, 2019 at 8:49

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using v-html in blade foreach loop [Vue warn]: Error compiling template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related