VueJS小胡子未定义常量

时间:2017-06-12 09:42:05

标签: laravel vue.js laravel-blade mustache

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

我的模板:

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

我的VueJS脚本:

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

我收到此错误:

  

使用未定义的常量tex​​te - 假设&#39; texte&#39; (查看:/var/www/vhosts/choraleuniversitaire.fr/laravel.choraleuniversitaire.fr/chorale/resources/views/admin/choriste/index.blade.php)

Full error here.

有人知道它搞砸了吗?

感谢&#39; S

3 个答案:

答案 0 :(得分:5)

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

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

这是因为刀片还使用了胡须,所以在vue看到它们之前它们会被刀片处理,这就是为什么你从Laravel而不是Vue收到错误的原因。

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

答案 1 :(得分:1)

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

1:在胡须前使用@

示例:

@{{ texte }}

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

示例:

@verbatim
    {{ texte }}
@endverbatim

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

答案 2 :(得分:-1)

data must be一个功能:

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