如何使用Vue.js在Ajax重復列表上應用過濾器？

Question

我正在嘗試對使用AJAX檢索的列表應用過濾器，我遇到的問題是Vue.js嘗試在加載和顯示列表之前應用過濾器。

這是我到目前為止的內容：

<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>

在這里，我試圖將過濾器應用於在日期創建的游戲上，它最終會在嘗試加載頁面時拋出錯誤，而不是拋出錯誤

Uncaught ReferenceError: string is not defined

有沒有辦法讓過濾器“等待”列表，然后再嘗試過濾數據？

Answer 1

您能做的最快的事情是使用方法而不是過濾器：

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