在blade foreach循环中使用v-html[Vue warn]:编译模板时出错

Question

我正试图在blade foreach循环中使用vuesv-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 warn]：编译模板时出错：

无效表达式：意外的标记"<"在中

<p>hello world</p>

原始表达式：v-html=">

你好世界

"

我之所以要使用v-html，是因为我打算使用一种类似<div v-html="marked({{$entry-content}})">的方法来输出降价

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