在 Laravel 8 和 VueJS 2 中使用 Marked 解析 Markdown

Posted 2023-02-16

【中文标题】在 Laravel 8 和 VueJS 2 中使用 Marked 解析 Markdown

【英文标题】：Parsing Markdown using Marked in Laravel 8 and VueJS 2

【发布时间】：2022-01-04 22:02:53

【问题描述】：

不知道你能不能帮到我。

我正在尝试使用 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>

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

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

【参考方案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.parse(this.data.body)。所以是的。

我刚刚尝试了这个解析，但它仍然无法解析降价

我的解决方案将解决您的问题；再次检查您是否正确执行了所有操作。

修复了它。我显然是个笨蛋。谢谢你的帮助:)