关于php：Laravel 5.3 with Vuejs ajax call-前端开发

Laravel 5.3 with Vuejs ajax call尝试使用 Vuejs 从数据库中获取一些数据。我的用户表中有一些虚拟数据。我想在我的视野中展示它们。问题是虽然页面加载，但...

尝试使用 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')


<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 资源文档

基础教程推荐