2016-09-30 77 views
1

我试图从一个端点API /数据传递一个对象的数据。但是当我运行我的应用程序,我没有看到我的控制台和网络选项卡中的任何东西,我没有看到任何xhr请求。控制台中也没有警告和错误。我在这里做错了什么?我已经正确地检查了端点及其从后端传递的数据。ajax调用vuejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>FLashy</title> 
    <link rel="stylesheet" href="http://localhost:8000/css/bootstrap.min.css" media="screen" title="no title"> 

    </head> 
    <body> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4" id="app"> 
      <h3 class="Text center">Datas</h3> 
      <p> 
       @{{ datas }} 
      </p> 
      </div> 
     </div> 
    </div> 

    <!-- scripts --> 
    <script src="http://localhost:8000/js/jquery-2.2.4.min.js"></script> 
    <script src="http://localhost:8000/js/bootstrap.min.js" charset="utf-8"></script> 
    <script src="http://localhost:8000/js/vue.js" charset="utf-8"></script> 
    <script src="http://localhost:8000/js/vue-resource.min.js" charset="utf-8"></script> 

<script type="text/javascript"> 

    new Vue({ 
      el: '#app', 

     data: { 

     }, 

     methods:{ 

     fetchData: function(){ 
      this.$http.get('api/data').then(function(response){ 

       // this.$set('datas', response.data); 
       console.log(response); 
      }, function(response){ 
       // error callback 
      }); 
     }, 

      ready: function(){ 
      this.fetchData(); 
     } 
     } 
    }); 
</script> 
    </body> 
</html> 

web.php

Route::get('api/data', function(){ 
    $a = []; 
    $a['id'] = 1; 
    $a['message'] = 'Lorem ipsum dolor sit amet, consectetur'; 
    $a['status'] = 'Completed'; 
    return response()->json($a,200); 
}); 

回答

3

ready钩内methods: {}处理程序,但实际上应该是外:

methods: { 
    fetchData: function() { 
    // your AJAX here 
    } 
}, 
ready: function() { 
    this.fetchData() 
}