Les moustaches de Vuejs ne fonctionnaient pas

Question

J'essayais de faire fonctionner VueJS avec Laravel et il se passe quelque chose de bizarre.

Mon modèle:

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

Mon script VueJS:

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

Je reçois cette erreur:

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

Full error here.

Est-ce que quelqu'un sait où ça gâche?

Answer 1

Si vous utilisez un fichier .blade.php alors vous devez faire:

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

C'est parce que la lame utilise également des moustaches, ils être traité par lame avant même que la vue les voit, c'est pourquoi vous recevez une erreur de Laravel et non t de Vue.

Voir le Blade & JavaScript Frameworks section des documents Laravel pour plus de détails.

Answer 2

datamust be fonction de Remerciez:

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

Answer 3

Il y a deux façons de procéder. 1: Utilisez le @ avant les moustaches.

Exemple:

@{{ texte }}

---

2: L'autre est d'utiliser la directive @verbatim sur un bloc de code.

Exemple:

@verbatim 
    {{ texte }} 
@endverbatim 

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