我在数据库中有2条记录Vue输出8条记录 [英] I have 2 records in a database Vue outputs 8 records
问题描述
我正在使用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开发者工具可帮助您查看回复数据.
如果响应数据有八个记录，则问题不在客户端，而在服务器端.
i am building an online casino using Laravel 5 and Vue JS. i have managed to figure out on my own how to output recently created games for my casino. It's a basic coin flip project and I have been able to figure out how to differentiate between games that are in progress and games that are waiting for a player to join.
However, I have created an application that reads a list of available games outputted to a JSON route in routes.php. I use Vue resource to read that JSON output, however, when I view the application in the web browser, I see eight different entries from the JSON that have nothing to do with the database. I am expecting two records to be displayed in the browser, yet 8 empty records are shown. I only have 2 records in my MySQl database.
i have two alternating templates that are displayed to the user. one if the game is joinable and the other if it's in progress. The JSON file outputted by Laravel is not read by the Vue application and instead, 8 blank records are displayed on the page. I spent the last two days trying to figure ou this problem and I seem to be stuck. here is my code
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'
});
EDIT: Controller with query:
Route::get('api/games', function() {
return App\Games::where('ready', 'Y')->get();
});
Any help is greatly appreciated!
You must be sure this.$http.get response.
Chrome Developer Tools helps you to view a reponse data.
If response data has eight records, the problem is not in client side but in server side.
这篇关于我在数据库中有2条记录Vue输出8条记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
