45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup lang='ts'>
|
|
import type { Player } from '~/types/Player'
|
|
|
|
const config = useRuntimeConfig()
|
|
|
|
const { data, pending, error } = await useFetch<Player[]>(
|
|
`${config.public.supabaseUrl}/rest/v1/random_player`,
|
|
{
|
|
method: 'GET',
|
|
headers: {
|
|
apikey: config.public.supabaseKey
|
|
},
|
|
server: false,
|
|
query: {
|
|
select: '*,rarity!inner(*),mlb_player!inner(*)',
|
|
// 'rarity.name': 'eq.All-Star',
|
|
// 'mlb_player.offense_col': 'eq.1',
|
|
franchise: 'eq.Baltimore Orioles',
|
|
limit: 3
|
|
}
|
|
}
|
|
)
|
|
|
|
// const player = computed(() => data.value?.[0] ?? null)
|
|
const players = computed(() => data.value ?? [])
|
|
|
|
console.log('data:')
|
|
console.log(data)
|
|
console.log('player: ')
|
|
console.log(players)
|
|
</script>
|
|
|
|
<template>
|
|
<h2>Random Cards!</h2>
|
|
<div >
|
|
<div v-if="pending">Loading...</div>
|
|
<div v-else-if="error">Failed to load player</div>
|
|
<div v-else class="grid">
|
|
<div v-for="player in players" :key="player.id">
|
|
<Player :player="player" />
|
|
</div>
|
|
</div>
|
|
<!-- <Player v-if="player" :player="player" /> -->
|
|
</div>
|
|
</template> |