关于php：Laravel 5.3 with Vuejs ajax call


Laravel 5.3 with Vuejs ajax call

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

浏览量：

layout.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
  </head>
  <body>

   
      @yield('content')
   

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

fetchUser.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@extends('layout')
@section('content')



  <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>



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

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var vm = new Vue({
    el: '#UserController',

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

      ready: function(){

    }
});

web.php

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

api.php

1
2
3
4
5
6
7
8
<?php

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 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 资源文档