Wie man einen Filter auf eine wiederholte Ajax-Liste mit Vue.js anwendet?

Question

Ich versuche, einen Filter auf eine Liste anzuwenden, die ich mit AJAX abrufen, das Problem, das ich habe, ist, dass Vue.js versucht, den Filter anzuwenden, bevor die Liste geladen und angezeigt wird.

Dies ist, was ich bisher:

<template> 
    <div class="grid__container games"> 
    <h2>Games</h2> 
    <div v-if="games"> 
     <table> 
     <tr> 
      <th>Player One</th> 
      <th>Results</th> 
      <th>Player Two</th> 
      <th>Played At</th> 
     </tr> 
     <tr v-for="game in games.data"> 
      <td>{{ game.player_one }}</td> 
      <td>{{ game.player_one_goals }} - {{ game.player_two_goals }}</td> 
      <td>{{ game.player_two }}</td> 
      <td>{{ [ game.created_at, "YYYY-MM-DD h:mm:ss" ] | moment "dddd, MMMMM, Do YYYYY" }}</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</template> 

<script> 
    import auth from '../auth' 

    export default { 
    data() { 
     return { 
     data: '', 
     games: '' 
     } 
    }, 
    methods: { 
     getGames() { 
     this.$http 
      .get('/api/games', { headers: auth.getAuthHeader() }).then((data) => { 
      this.data = data 
      this.games = JSON.parse(this.data.body) 
     }, (error) => { 
      console.log(error) 
     }) 
     } 
    }, 
    created: function() { 
     this.getGames() 
    } 
    } 
</script> 

Hier habe ich die Filter auf den Spielen versuchen zum Zeitpunkt erstellt anzuwenden, es endet, anstatt einen Fehler zu werfen, wenn der Seite

Uncaught ReferenceError: string is not defined 

zu laden versuchen,

Gibt es eine Möglichkeit, den Filter warten zu lassen, bis die Liste geladen wird, bevor Sie versuchen, die Daten zu filtern?

Answer 1

Der schnellste, was Sie tun können, ist eine Methode anstelle eines Filters verwenden:

createdDate(game) { 
    if (game !== undefined && game.date !== undefined) { 
    return someFunctionThatWillFormatYourDate(game.date) 
    } else { 
    return '' 
    } 
}