如何使用 Vue.js 对 ajax 重复列表应用过滤器？

Posted 2023-02-22

【中文标题】如何使用 Vue.js 对 ajax 重复列表应用过滤器？

【英文标题】：How to apply a filter on an ajax repeated list using Vue.js?

【发布时间】：2016-12-14 07:02:48

【问题描述】：

我正在尝试对使用 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

有没有办法让过滤器在尝试过滤数据之前“等待”列表加载？

【参考方案1】：

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

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