如何使用vue正确解释laravel模板中的html标签

Question

我想在laravel8惯性vue中的vue中显示使用markdow标记的文本。

我知道如何使用将其转换为刀片模板

{!!Markdown($post->body, ['config' => 'default']) !!}

但它在vue模板中不起作用。

为了解决这个问题，我将markdown转换为html到控制器中。

public function Index($id = Null)
{
$this->id = $id;
return Inertia::render('Posts/Index', [
// 'posts' => Post::orderBy('created_at','DESC')->with('user')->get()
'posts' => Post::select('id', 'title', 'abstract', 'created_at')
->addSelect([
'userfirstname' => User::select('firstname')->whereColumn('id', 'posts.user_id'),
'userlastname' => User::select('familyname')->whereColumn('id', 'posts.user_id')
])
->orderBy('created_at', 'DESC')
->get(),
//lazily evaluated
'details' => function () {
$post = Post::find($this->id);
$parser = new Parsedown();
$post->body = $parser->text($post->body);
return $post;
}
]);
}
}

该控制器用于更新主vue中包含的组件。这是组件的vue

<template>
<div class="container bg-gray-100">
{{details.title}}
{{details.body}}
</div>
</template>
<script>
export default {
name: "PostDetails",
props: ["details"],
};
</script>

组件在访问url时会正确更新，但显示的文本会显示html标记，就像使用文本编辑器一样。如何正确解释html标记？

Answer 1

经过一些搜索，我发现

<div v-html="details.bod" ><div>

是解决方案。