Currently, I am facing an issue while attempting to implement a filter on a list fetched via AJAX in my Vue.js application. The problem arises as Vue.js attempts to apply the filter before the list is fully loaded and displayed.
Below is my current implementation:
<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>
While trying to apply the filter based on the game's creation date, I encounter an error when loading the page:
Uncaught ReferenceError: string is not defined
I'm looking for a solution or workaround that would delay the filtering process until after the list has been successfully loaded. Is there any way to achieve this?