web-dev-qa-db-ja.com

Laravelは定義されていません

さて、私は新しいlaravel 5.3とvue.jsで遊んでいます。DBにいる一部のユーザーにGET呼び出しを実行したいのですが

私はコンポーネントを使用しています。

これは私のapp.jsです

require('./bootstrap');

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

const app = new Vue({

    el: 'body',

});

これは私のコンポーネントのUser.vueです。必要に応じて投稿できるため、投稿サイズの理由でHTMLテンプレートを省略しています。

<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>

コンソールで2つのエラーが発生する

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

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

これは私のpackage.jsonです。これを機能させるために必要なすべての知識がありますvue and vue resource

{
  "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"
  }
}

誰かが私をここで助けてくれることを願っています。ありがとうございました

javascriptphplaravelnpmvue.js
15
NEOJPK

ご覧のとおり、デフォルトでapp.bladeに挿入されているように、これをブレードに配置してみてくださいLaravel 5.3

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

または、よりクリーンなフォーマット：

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

ロッコの答えと同じことをします。

37
Mihai Ocneanu

axiosを使用している場合は、axiosをインポートした後、bootstrap.jsファイルに以下が含まれていることを確認してください。

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