Laravel Blade中使用Vue 2遇问题：@{{ message }}及v-model异常求助

嘿，我完全懂你刚入门就踩坑的郁闷！咱们一步步拆解你的问题：

问题根源 #

你遇到的两个问题其实都是Blade模板引擎和Vue的语法冲突导致的：

1. 报错“Use of undefined constant message - assumed 'message'”：Laravel的Blade会优先解析{{ }}语法，把它当成PHP代码处理。当你写{{ message }}时，PHP会把message当成一个未定义的常量，所以抛出错误。
2. 输入框为空：你加了@转义后，@{{ message }}确实能显示文本，但这时候Vue看到的是字符串{{ message }}，而不是它自己的插值语法，所以v-model的绑定虽然存在，但页面没和Vue的data正确关联，初始值自然渲染不出来。

两种解决方案 #

方案1：用Blade的@verbatim指令隔离Vue模板

这是最简单直接的方法，告诉Blade不要解析包裹范围内的内容：

@verbatim
<div id="app">
  <h1>{{ message }}</h1>
  <input type="text" id="input" v-model="message">
</div>
@endverbatim

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

方案2：自定义Vue的插值分隔符

如果你的页面里有大量Vue代码，不想反复写@verbatim，可以修改Vue的默认插值符号，避开和Blade的冲突：

<div id="app">
  <h1>[[ message ]]</h1>
  <input type="text" id="input" v-model="message">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  delimiters: ['[[', ']]'], // 把Vue插值改成[[ ]]
  data: {
    message: 'Hello Vue!'
  }
})
</script>

⚠️ 注意：v-model是Vue的指令，Blade不会解析它，所以不需要修改指令里的变量名。

两种方法都能完美解决你的问题，选哪种看你实际的代码量就行～

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