Vue JS中使用marked渲染Prop传入的Markdown内容不生效如何解决

问题根因 #

计算属性本质是基于响应式依赖自动计算的缓存值，不支持直接传入参数，你之前尝试给计算属性传til.description的用法不符合Vue的语法规范，所以功能失效。

修复方案 #

把markdownToHtml从计算属性改为普通方法，接收markdown文本作为入参进行转换即可，完整修复代码如下：

<template>
  <div class="til-list">
    <div v-for="til in tils" :key="til">
      <div class="til">
        <h3>{{ til.title }}</h3>
        <p>{{ til.description }}</p>
        <!-- 放开这行调用方法即可 -->
        <div v-html="markdownToHtml(til.description)"></div>
        <span v-for="tag in til.tags" :key="tag"> #{{ tag }} </span>
      </div>
    </div>
  </div>
</template>

<script>
import marked from "marked";

export default {
  props: ["tils"],
  data() {
    return {
      markdown: "# Hello World",
    };
  },
  // 改成methods定义转换方法
  methods: {
    markdownToHtml(description) {
      return marked(description);
    }
  }
};
</script>

注意事项 #

由于v-html会直接解析HTML内容，若你的描述字段允许普通用户提交，建议搭配XSS过滤库对转换后的内容做安全校验，避免恶意脚本注入风险。

内容的提问来源于stack exchange，提问作者Francois Dumas Lattaque