【发布时间】：2017-05-13 07:18:35
【问题描述】：
我正在使用 Laravel 5 和 Vue JS 构建一个在线赌场。我已经设法自己弄清楚如何为我的赌场输出最近创建的游戏。这是一个基本的掷硬币项目，我已经能够弄清楚如何区分正在进行的游戏和等待玩家加入的游戏。
但是，我创建了一个应用程序，它读取输出到 routes.php 中 JSON 路由的可用游戏列表。我使用 Vue 资源来读取 JSON 输出，但是，当我在 Web 浏览器中查看应用程序时，我看到来自 JSON 的八个不同条目，它们与数据库无关。我期望在浏览器中显示两条记录，但显示了 8 条空记录。我的 MySQl 数据库中只有 2 条记录。
我有两个交替显示给用户的模板。一个如果游戏是可加入的，另一个如果它正在进行中。 Laravel 输出的 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() {
return App\Games::where('ready', 'Y')->get();
});
非常感谢任何帮助！
【问题讨论】：
-
用查询分享你的控制器方法？