javascript - How to apply a filter on an ajax repeated list using Vue.js? -

i'm trying apply filter on list retrieve using ajax, problem have vue.js tries apply filter before list loaded , shown.

this have far:

<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, yyyyy" }}</td>         </tr>       </table>     </div>   </div> </template>  <script>   import auth '../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> 

here trying apply filter on game's created @ date, ends throwing error instead when trying load page

uncaught referenceerror: string not defined 

is there way make filter 'wait' list loaded before trying filter data?

the quickest thing can use method instead of filter:

createddate(game) {   if (game !== undefined && game.date !== undefined) {     return somefunctionthatwillformatyourdate(game.date)   } else {     return ''   } }