VueJS小胡子未定义常量

Question

我试图让VueJS与Laravel合作，并且发生了一些奇怪的事情。

我的模板：

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

我的VueJS脚本：

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

我收到此错误：

使用未定义的常量tex​​te - 假设'texte'（查看：/var/www/vhosts/choraleuniversitaire.fr/laravel.choraleuniversitaire.fr/chorale/resources/views/admin/choriste/index.blade.php）

Full error here.

有人知道它搞砸了吗？

谢谢

Answer 1

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

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

那是因为刀片也使用胡须，因此在vue甚至看到它们之前它们会被刀片处理，这就是为什么你从Laravel而不是Vue收到错误的原因。

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

Answer 2

有两种方法可以解决这个问题。

1：在胡须前使用@。

例：

@{{ texte }}

---

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

例：

@verbatim
    {{ texte }}
@endverbatim

https://laravel.com/docs/5.4/blade#blade-and-javascript-frameworks

Answer 3

data must be功能：

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