У меня есть 2 записи в базе данных. Vue выводит 8 записей

Я создаю онлайн-казино, используя Laravel 5 и Vue JS. мне удалось самостоятельно выяснить, как выпускать недавно созданные игры для моего казино. Это основной проект флип-монеты, и я смог выяснить, как различать игры, которые находятся в процессе, и игры, которые ждут, когда игрок присоединится.

Однако я создал приложение, которое читает список доступных игр, выведенных на маршрут JSON в route.php. Я использую ресурс Vue для чтения этого вывода JSON, однако, когда я просматриваю приложение в веб-браузере, я вижу восемь разных записей из JSON, которые не имеют никакого отношения к базе данных. Я ожидаю, что в браузере будут отображаться две записи, но пока отображаются 8 пустых записей. У меня только 2 записи в моей базе данных MySQl.

• Проблема с JQuery getJSON извлекает данные из контроллера (воспламенитель кода)
• Верните объект JSON, используя PHP json_encode () и MySQL, чтобы перейти к функции jQuery
• Как использовать php restful api-centric design internal вместо HTTP-запроса
• Как отправить данные json_encode с помощью HTML5 SSE
• Angularjs $ http метод get для данных JSONP без параметра CALLBACK

У меня есть два альтернативных шаблона, которые отображаются пользователю. один, если игра является совместимой, а другая, если она выполняется. Файл JSON, выданный Laravel, не считывается приложением 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' }); 

EDIT: контроллер с запросом:

 Route::get('api/games', function() { 

return App \ Games :: where ('ready', 'Y') -> get ();

});

Любая помощь очень ценится!