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!
