web-dev-qa-db-fra.com

Laravel n'est pas défini

Eh bien, je joue avec les nouveaux Laravel 5.3 et vue.js et je souhaite passer un appel GET à certains utilisateurs de ma base de données.

Im utilisant des composants de btw. 

C'est mon app.js

require('./bootstrap');

Vue.component('example', require('./components/UserComponents/User.vue'));

const app = new Vue({

    el: 'body',

});

Ceci est mon composant User.vue j’ai laissé le modèle HTML pour une raison ultérieure car je peux le poster si nécessaire

<script>

    export default{

        data : function () {
            return {
                users : ''
            }
        },

        methods: {


            fetchUser: function () {

                var vm = this;

                vm.$http.get('user/', function (data) {
                   vm.$set('users', data)
                })

            }
        },
        ready() {

            this.fetchUser();
        },

    }
</script>

Je reçois 2 erreurs dans la console

 vue-resource.common.js?d39b:27 0ReferenceError: Laravel is not defined(…)

(program):29 Uncaught (in promise) ReferenceError: Laravel is not defined(…)

c'est mon package.json comme vous pouvez le voir, j'ai tous les deps pour cela travailler vue et vue ressource

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  }
}

J'espère que quelqu'un pourra m'aider ici. Je vous remercie

14
NEOJPK

Essayez de mettre ceci sur votre lame, comme vous pouvez le voir est inséré par défaut sur app.blade sous Laravel 5.3

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>
38
Rocco Milluzzo

Ou pour un format plus propre:

<script>
    window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>

Fait la même chose que la réponse de Rocco.

37
Mihai Ocneanu

si vous utilisez axios, assurez-vous que le fichier bootstrap.js suivant est importé après avoir importé axios:

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
};
0
omarjebari