在Laravel 8与VueJS 2中使用Marked解析Markdown的问题求助

问题原因 #

你代码的核心问题是模板内的内容绑定错误：你已经在计算属性中用marked把Markdown内容转换成了HTML，但v-html绑定的仍然是原始未解析的data.body，没有调用你写好的转换后的计算属性body。

修复步骤 #

1. 修改模板中v-card-text的绑定逻辑，把data.body替换为你定义的计算属性body：

<!-- 修改前 -->
<v-card-text v-html="data.body"></v-card-text>

<!-- 修改后 -->
<v-card-text v-html="body"></v-card-text>

其他排查建议 #

如果修改绑定后仍不生效，可以按以下顺序排查：

• 检查marked导入写法是否匹配版本：如果使用4.x及以上版本的marked，导入语句可以调整为import { marked } from 'marked'，避免默认导出结构不匹配导致parse方法调用失败
• 在计算属性body中增加日志打印，确认marked.parse(this.data.body)的输出是否符合预期，排除marked导入失败的问题
• 注意：使用v-html直接渲染用户提交内容存在XSS注入风险，建议配合DOMPurify等工具对转换后的内容做安全过滤后再渲染到页面。

内容的提问来源于stack exchange，提问作者Timmsy