2016-08-25 55 views
14

好吧,我打新laravel 5.3和vue.js,我希望做一个GET调用一些用户我在我的DBLaravel没有定义

进出口使用的组件BTW。

这是我app.js

require('./bootstrap'); 

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

const app = new Vue({ 

    el: 'body', 

}); 

这是我的组件User.vue我离开后尺寸原因HTML模板出来,我可以将它张贴如果neccesary

<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,你可以看到我有这个所有的代价窝rk vue和vue资源

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

希望有人可以帮助我在这里。谢谢

+0

你能告诉你的'/ bootstrap.js'。变量/常量'Laravel'正在被使用而没有被初始化。 –

+0

@NEOJPK,你可以发布你的HTML模板吗?我也在玩。所以它会帮助我学习。 –

+0

我再也没有它了。但我认为他们修好了。去抓作曲家的最新版本。然后npm install – NEOJPK

回答

37

尝试把这个刀片,你可以看到插在默认情况下app.blade上Laravel 5.3

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

我遇到了类似的问题,我用这种方法解决了!谢谢! – Mistre83

37

或者更清洁格式:

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

不与Rocco的回答一样。

+0

能否请您在此答案中添加更多详细信息为什么我们需要这样做? – Naeem

+1

它只是更干净。 –

+0

我听说laravel需要这个来提供安全 – Danish

0

如果你使用爱可信然后确保下面是你的bootstrap.js爱可信文件导入后:

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