VueJS 小胡子未定义常量

Question

我试图让 VueJS 与 Laravel 一起工作，但发生了一些奇怪的事情。

我的模板：

<div id="tuto">
  <p>{{ texte }}</p>
</div>

我的 VueJS 脚本：

var vm = new Vue({
    el: '#tuto',
    data: {
        texte: '<span>Mon texte</span>',
    }
});

我收到此错误：

Use of undefined constant texte - assumed 'texte' (View: /var/www/vhosts/xxxx/resources/views/admin/xxx/index.blade.php)

Full error here.

有人知道哪里出了问题吗？

谢谢

Answer 1

datamust be一个函数：

var vm = new Vue({
    el: '#tuto',
    data: function(){
        return {
            texte: '<span>Mon texte</span>'
        }
    }
});

Answer 2

如果您使用的是 .blade.php 文件，那么您需要执行以下操作：

<div id="tuto">
  <p>@{{ texte }}</p>
</div>

那是因为 blade 也使用胡须，所以它们在 vue 看到它们之前就被 blade 处理了，这就是为什么您从 Laravel 而不是 Vue 收到错误。

有关详细信息，请参阅 Laravel 文档的 Blade & JavaScript Frameworks section。

Answer 3

有两种方法。

1：在小胡子前使用@。

示例：

@{{ texte }}

2：另一种是在代码块上使用@verbatim指令。

示例：

@verbatim
    {{ texte }}
@endverbatim

VueJS mustache undefined constant