我在數據庫中有2條記錄Vue輸出8條記錄

我正在使用Laravel 5和Vue JS構建在線賭場。我設法弄清楚我自己如何輸出最近爲我的賭場創建的遊戲。這是一個基本的投幣翻轉項目，我已經能夠弄清楚如何區分正在進行的遊戲和等待玩家加入的遊戲。我在數據庫中有2條記錄Vue輸出8條記錄

但是，我創建了一個應用程序，它讀取輸出到routes.php中JSON路由的可用遊戲列表。我使用Vue資源讀取JSON輸出，但是，當我在Web瀏覽器中查看應用程序時，我看到JSON中有8個與數據庫無關的不同條目。我期待在瀏覽器中顯示兩條記錄，但會顯示8條空記錄。我的MySQl數據庫中只有2條記錄。

我有兩個交替模板顯示給用戶。一個如果遊戲可以連接，另一個如果正在進行。由Vara應用程序不讀取Laravel輸出的JSON文件，而是在頁面上顯示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() {

回報應用程序\遊戲::在哪裏（ '準備好'， 'Y'） - >獲得（）;

}）;

任何幫助，非常感謝！

來源

2016-12-29 Tom Morison

與查詢分享您的控制器方法？ – C2486

您必須確定this.$http.get的迴應。 Chrome Developer Tools可幫助您查看響應數據。如果響應數據有八條記錄，則問題不在客戶端，而在服務器端。

來源

2016-12-29 01:03:40 devneko

這是我在Chrome開發工具中預覽我的響應數據時得到的JSON。我看到的只是我期望的JSON輸出，但這不會被我的Vue.JS腳本解析。所以服務器工作正常。 '[{「id」：1，「player1」：16，「player2」：50，「winner_id」：50，「ready」：「Y」，「created_at」：「2016-12-18 19:46： 30「，」updated_at「：」2016-12-18 19:46:30「}]' –

@TomMorison我在消息來源中發現了一個令人懷疑的事情。請參閱vue-resource文檔。（https://github.com/pagekit/vue-resource/blob/master/docs/http.md#example）$ http.get（）將回調對象傳遞給回調函數。所以你必須使用json（）方法來獲得你想要的數組數據。 – devneko

謝謝！這工作。 –

我在數據庫中有2條記錄Vue輸出8條記錄

回答

相關問題