Wesa not working

Question

I tried to get VueJS to work with Laravel and something strange was happening.

My template:

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

My VueJS script:

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

I get this error:

Using undefined constant texte - assumed 'texte' (View: /var/www/vhosts/choraleuniversitaire.fr/laravel.choraleuniversitaire.fr/chorale/resources/views/admin/choriste/index.blade.php)

The full mistake is here.

Does anyone know where this is happening?

Thanks x

Answer 1

If you are using a file .blade.php, then you need to do:

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

, , , vue , Laravel, Vue.

. Blade JavaScript Framework Laravel.

Answer 2

.

1: @ .

:

@{{ texte }}

---

2: - @verbatim .

:

@verbatim
    {{ texte }}
@endverbatim

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

Answer 3

data should be a function:

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