Question

我正在尝试在刀片foreach循环中使用vue 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 =“

hello world
”

我要使用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 }}')">

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

1 个答案: