Laravel 5.3 使用 Vuejs ajax 调用

Question

正在尝试使用 Vuejs 从数据库中获取一些数据。我的用户 table 中有一些虚拟数据。我想在我的视野中展示它们。问题是虽然页面加载了，但它无法从用户那里获取数据 table。它不会给出任何控制台错误。我检查了数据库连接，重新启动了服务器，还用邮递员检查了 api 数据。它工作正常。

观看次数：

layout.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
  </head>
  <body>

    <div class="container">
      @yield('content')
    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"></script>
    @yield('scripts')
  </body>
</html>

fetchUser.blade.php

@extends('layout')
@section('content')

<div id="UserController">

  <table class="table table-hover table-striped">
    <thead>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </thead>
    <tbody>
      <tr v-for="user in users">
          <td>@{{ user.id }}</td>
          <td>@{{ user.name }}</td>
          <td>@{{ user.email }}</td>
          <td>@{{ user.address }}</td>
          <td>@{{ user.created_at }}</td>
          <td>@{{ user.updated_at }}</td>
      </tr>
    </tbody>
  </table>

</div>

@endsection
@section('scripts')
<script src="{{ asset('js/script.js') }}" charset="utf-8"></script>
@endsection

script.js

var vm = new Vue({
    el: '#UserController',

    methods: {
      fetchUser: function(){
          this.$http.get('api/users', function(data) {
              this.$set('users', data )
          })
      }
    },

      ready: function(){

    }
});

web.php

Route::get('/', function () {
    return view('fetchUser');
});

api.php

<?php

use Illuminate\Http\Request;
use App\User;
Route::get('/users', function(){
    return User::all();
});

Answer 1

你应该使用 then ，并在 ready 函数中调用 fetchUser

 data:{
   users: []
 },

 methods:{
     fetchUser: function(){
          this.$http.get('api/users').then(function(response){
                this.$set('users', response.data);
          }, function(response){
              // error callback
          });
 },

 ready: function(){
        this.fetchUser();
        }

vue-resource docs

Laravel 5.3 使用 Vuejs ajax 调用

Laravel 5.3 with Vuejs ajax call

php

vue.js

vue-resource

laravel-5.3