vuejs와의 ajax 호출

개체를 전달하는 끝점 api/data에서 데이터를 가져 오려고합니다. 하지만 내 응용 프로그램을 실행할 때 내 콘솔과 네트워크 탭에서 아무 것도 보지 못합니다. xhr 요청을 보지 못했습니다. 콘솔에는 경고 및 오류도 없습니다. 내가 여기서 뭐 잘못하고 있니? 끝점과 백엔드에서 전달되는 데이터를 제대로 확인했습니다.vuejs와의 ajax 호출

<!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); 
});

출처

2016-09-30 Noob Coder

귀하의 ready 후크 내부 methods: {} 핸들러 그러나 실제로 외부해야한다 :

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

출처

2016-09-30 17:36:08

vuejs와의 ajax 호출

답변

관련 문제