Laravel中Vue结合marked.js渲染Markdown遇模板编译错误求助

这个问题我之前也碰到过，根源在于你把Blade渲染的内容直接硬编码进Vue的模板表达式里，破坏了JavaScript的字符串语法规则。当内容里包含单引号、换行或者break/for这类JS关键字时，Vue解析markdown('{{ ... }}')这个表达式就会出错——因为Blade输出的内容会直接打断字符串的结构，导致Vue把后面的内容当成无效的JS代码。

为什么组件里能正常工作？ #

在你的RecordComponent.vue中，你是直接使用Vue的响应式数据record.content，相当于把数据作为变量传递给markdown()方法，而不是把字符串硬编码到方法调用的参数里，所以不会出现语法冲突。

解决方案 #

推荐两种可行的修复方式，第二种更符合Vue的开发模式：

方案1：用v-bind传递内容（修改Blade模板）

把Blade变量通过v-bind绑定为元素的属性，让Vue正确解析数据，而不是直接嵌入字符串：

@foreach($entries as $entry)
<a href="/entry/{{$entry->id}}"><h3>{{ $entry->created_at->format('M d Y') }}</h3></a>
<!-- 使用json_encode自动转义引号、换行等特殊字符 -->
<div :raw-content="{{ json_encode($entry->content) }}" v-html="markdown(rawContent)">
</div>
<hr>
@endforeach

你的app.js不需要修改，markdown方法依然可以接收参数正常工作：

const marked = require('marked');
const app = new Vue({
 el: '#app',
 methods: {
 markdown(input){
 return marked(input, { sanitize: true })
 }
 }
});

方案2：把数据一次性传给Vue（更推荐）

完全避免Blade和Vue模板混写，把所有entries数据注入到Vue实例中，让Vue负责循环渲染：

1. 修改Blade模板：

<div id="app">
  <div v-for="entry in entries" :key="entry.id">
    <a :href="`/entry/${entry.id}`">
      <h3>{{ new Date(entry.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}</h3>
    </a>
    <div v-html="markdown(entry.content)"></div>
    <hr>
  </div>
</div>

<!-- 把Laravel的$entries转为JSON注入到全局变量 -->
<script>
window.initialEntries = @json($entries);
</script>

2. 更新app.js，从全局变量获取初始数据：

const marked = require('marked');
const app = new Vue({
  el: '#app',
  data() {
    return {
      entries: window.initialEntries
    };
  },
  methods: {
    markdown(input){
      return marked(input, { sanitize: true })
    }
  }
});

核心原理 #

json_encode()（或Blade的@json指令）会自动处理所有特殊字符（比如单引号、换行、制表符），把内容转为合法的JavaScript字符串/对象，这样Vue就能正确解析数据，不会出现模板编译错误。

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst