在刀片 foreach 循环中使用 v-html [Vue 警告]：编译模板时出错答案

【问题标题】：Using v-html in blade foreach loop [Vue warn]: Error compiling template在刀片 foreach 循环中使用 v-html [Vue 警告]：编译模板时出错
【发布时间】：2020-02-22 22:26:32
【问题描述】：

我正在尝试在刀片 foreach 循环中使用 vues v-html：

@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 警告]：编译模板出错：

无效的表达式：意外的标记 '
<p>hello world</p>
原始表达式：v-html="

你好世界
"

我之所以要使用v-html是因为我打算使用像<div v-html="marked({{$entry-content}})">这样的方法来输出markdown

【问题讨论】：

原始html也应该被引用<div v-html="'<p>hello world</p>'"></div>
@OluwafemiSule 这行得通，但我怎样才能让<div v-html="marked({{$entry->content}})"> 正常工作？

标签： laravel vue.js laravel-blade

【解决方案1】：

假设 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 }}')">

【讨论】：