Question

我正在使用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() {

返回App \ Games :: where（'ready'，'Y'） - ＆gt; get（）;

}）;

非常感谢任何帮助！

Answer 1

您必须确保this.$http.get回复。 Chrome开发者工具可帮助您查看响应数据。如果响应数据有8条记录，则问题不在客户端，而在服务器端。

我在数据库中有2条记录Vue输出8条记录

1 个答案: