ajax 用 vuejs 调用

Question

我正在尝试从传递对象的端点 api/data 获取数据。但是当我运行我的应用程序时，我在控制台和网络选项卡中看不到任何内容，我也看不到任何 xhr 请求。控制台中也没有警告和错误。我在这里做错了什么吗？我已经正确检查了端点及其从后端传递的数据。

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

Answer 1

您的 ready 挂钩在 methods: {} 处理程序内部，但实际上应该在外部：

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

ajax 用 vuejs 调用

ajax call with vuejs

ajax

laravel

vue.js

vue-resource