我正在尝试使用Laravel和Vue.js从数据库中获取数据。 我得到的结果是没有。但是firebug控制台显示了响应。请查看附件图片。请检查我的代码并纠正我。
data.blade.php
@extends('layouts.app')
@section('title', 'Customers List')
@section('styles')
@endsection
@section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Customers List</div>
<div class="panel-body">
<table class="table table-hover table-bordered" id="app">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Reference ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
?>
<tr v-for="message in messages">
<td> {{ $i }} </td>
<td> @{{ message.name }} </td>
<td> @{{ message.reference_id }} </td>
<td><a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button">Click Here</a></td>
</tr>
<?php $i++; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<script src="/js/customers.js"></script>
@endsection
customers.js
new Vue({
el: '#app',
ready: function() {
this.fetchMessages();
},
methods: {
fetchMessages: function() {
this.$http.get('/customers/list/data', function(messages) {
alert(messages);
this.$set('messages', messages);
});
}
}
});
控制器
public function showCustomersData()
{
$listCustomers = Customer::select('id', 'name', 'reference_id')
->orderBy('id', 'desc')
->get();
return response()->json(['messages' => $listCustomers]);
}
路线
Route::get('/customers/list/data', [
'as' => 'customerListData', 'uses' => 'CustomerController@showCustomersData'
]);
答案 0 :(得分:1)
我编辑过控制器部分。现在我得到了结果。
将return response()->json(['messages' => $listCustomers])
替换为return $listCustomers
。
public function showCustomersData()
{
$listCustomers = Customer::select('id', 'name', 'reference_id')
->orderBy('id', 'desc')
->get();
return $listCustomers;
}
答案 1 :(得分:0)
您可能需要根据控制台中的警告消息预先初始化Vue数据对象中的消息变量。我认为这取决于您使用的VueJs的版本。尝试:
new Vue({
el: '#app',
data: {
messages: []
},
ready: function() {
this.fetchMessages();
},
methods: {
fetchMessages: function() {
this.$http.get('/customers/list/data', function(messages) {
alert(messages);
this.$set('messages', messages);
});
}
}
});
答案 2 :(得分:0)
以下是使用模拟ajax请求更新网格数据的示例。希望能帮到你。
var data = [{
title: 'Test',
description: 'This is a test.'
}, {
title: '404Error',
description: '404 Page not found.'
}];
new Vue({
el: '#app',
data: {
messages: []
},
ready: function() {
this.fetchMessages();
},
methods: {
fetchMessages: function() {
var self = this;
// simulate the ajax request
setTimeout(function(){
self.messages = data;
}, 1000);
}
}
});
&#13;
table {
border: 1px solid #ccc;
table-layout: fixed;
border-collapse: separate;
}
table th, table td {
border: 1px solid #ccc;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<div id="app">
<table>
<tr>
<th>Index</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr v-for="message in messages">
<td>{{$index+1}}</td>
<td>{{message.title}}</td>
<td>{{message.description}}</td>
<td><button>Click me</button></td>
</tr>
</table>
</app>
&#13;
P.S。 第一个警告告诉您更改代码,它更喜欢
// GET request
this.$http({url: '/someUrl', method: 'GET'}).then(function (response) {
// success callback
}, function (response) {
// error callback
});
第二个警告告诉您在messages
中预先启动变量data
最后,对不起,我不知道,以前没有看到它。