41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup lang='ts'>
|
|
import type { Player } from '~/types/Player'
|
|
|
|
// const config = useRuntimeConfig()
|
|
const client = useSupabaseClient()
|
|
|
|
const { data: playerList, pending, error } = await useAsyncData<Player[] | null>(
|
|
'random_player',
|
|
async () => {
|
|
const { data } = await client.from('random_player')
|
|
.select('*,rarity!inner(*),mlb_player!inner(*)')
|
|
.eq('franchise', 'Baltimore Orioles')
|
|
.eq('mlb_player.offense_col', 1)
|
|
.limit(3)
|
|
|
|
console.log('players from supabase: ')
|
|
console.log(data)
|
|
return data
|
|
},
|
|
{
|
|
lazy: true,
|
|
server: false
|
|
}
|
|
)
|
|
|
|
</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-if="playerList?.length == 0">No players found</div>
|
|
<div v-else class="grid">
|
|
<div v-for="player in playerList" :key="player.id">
|
|
<Player :player="player" />
|
|
</div>
|
|
</div>
|
|
<!-- <Player v-if="player" :player="player" /> -->
|
|
</div>
|
|
</template> |