0

我想在 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 标记？

4

1 回答 1

0

经过一番搜索，我发现

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

是解决方案。

于 2020-09-22T16:49:15.653 回答