我正在使用Laravel 5和Vue JS建立在线赌场。我设法自己弄清楚了如何为我的赌场输出最近创建的游戏。这是一个基本的投币游戏项目，我已经能够弄清楚如何区分进行中的游戏和等待玩家加入的游戏。
但是，我创建了一个应用程序，该应用程序读取在routes.php中输出到JSON路由的可用游戏列表。我使用Vue资源读取该JSON输出，但是，当我在Web浏览器中查看该应用程序时，我看到了JSON中与数据库无关的八个不同条目。我希望在浏览器中显示两个记录，但显示了8个空记录。我的MySQl数据库中只有2条记录。
我有两个交替的模板显示给用户。一个是可以加入游戏的游戏，另一个是正在进行中的游戏。Larue输出的JSON文件不会被Vue应用程序读取，而是在页面上显示8条空白记录。我花了最后两天的时间来解决这个问题，但似乎还是被困住了。这是我的代码
Viewgames.blade.php
@extends('app')
@section('content')
<strong>Below is a list of joinable games</strong>
<div class="container">
<games></games>
</div>
<div id="games-list">
<template id="games-template">
<ul class="list-group">
<li class="list-group-item" v-for="game in games">
<div v-if="game.ready === 'Y'">
<strong>play against @{{ game.player1 }}</strong>
</div>
<div v-else>
<strong>in progress</strong>
</div>
</ul>
</template>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>
<script src="js/all.js"></script>
@endsection
all.js
.component('games', {
template: '#games-template',
data: function() {
return {
games: []
}
},
created: function() {
this.$http.get('api/games').then(function (games) {
this.games = games;
}.bind(this));
},
}）;
new Vue({
el: 'body'
});
编辑：控制器与查询：
Route::get('api/games', function() {
返回App \ Games :: where（'ready'，'Y'）-> get（）;
}）;
任何帮助是极大的赞赏！
您必须确定this.$http.get响应。Chrome开发者工具可帮助您查看回复数据。如果响应数据有八个记录，则问题不在客户端，而在服务器端。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句