使用 Marked in Laravel 8 和 VueJS 2 解析 Markdown

Question

不知道你能不能帮我。

我正在尝试使用 Laravel 8 和 VueJS 构建一个论坛，但是我遇到了问题，Marked 插件似乎无法正常工作。

它不会将 markdown 转换为 html，我认为我使用它是正确的，但我可能是错的。

我的 Vue 组件代码如下

<template>
    <v-card
  elevation="2"
  outlined
  shaped
>
<v-container fluid>
<v-card-title>
    {{data.title}}
</v-card-title>
<v-card-subtitle>
    Posted By {{data.user}} {{data.created_at}}
</v-card-subtitle>
<v-spacer></v-spacer>
<v-card-text v-html="data.body"></v-card-text>
</v-container>
    </v-card>
</template>

<script>
import marked from 'marked';

export default {
    props:['data'],
    computed:{
        body(){
            return marked.parse(this.data.body);
        }
    }

}
</script>

<style>

</style>

我试过将它定义为全局导入，但它仍然不起作用。

它仍然显示降价而不是转换为 html。

Answer 1

替换此行：

<v-card-text v-html="data.body"></v-card-text>

与：

<v-card-text v-html="body"></v-card-text>

在您的代码中，您使用的是 data，这是原始道具。但您真正想要的是使用计算值 body，它调用 Marked.

您应该避免使用同名的属性（data.body 和 body）以避免混淆。如果将计算的名称从 body() 重命名为 markedHtml()，代码将更易于阅读。

你也没有正确导入 Marked，使用这个导入：

import { marked } from 'marked';

使用 Marked in Laravel 8 和 VueJS 2 解析 Markdown

Parsing Markdown using Marked in Laravel 8 and VueJS 2

laravel

vue.js

vuejs2

vuetify.js

laravel-8