<template>
<div>
<h1>Example using ref</h1>
<UTable :data="products" :loading="productsLoading" class="flex-1 max-h-[312px]" />
{{ products }}
<h1>Example using static data</h1>
<UTable :data="[
{ name: 'Product 1', price: '$10', description: 'Description of Product 1' },
{ name: 'Product 2', price: '$20', description: 'Description of Product 2' },
{ name: 'Product 3', price: '$30', description: 'Description of Product 3' }
]" class="flex-1 max-h-[312px]" />
</div>
</template>
<script lang="ts" setup>
definePageMeta({
middleware: ['auth']
})
const toast = useToast()
const products = ref()
const productsLoading = ref(true)
async function initProducts() {
try {
productsLoading.value = true
let resp = await $fetch('/api/staff/products', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
console.log('Products response:', JSON.stringify(resp))
products.value = JSON.parse(JSON.stringify(resp)).items
console.log('Products fetched:', products.value)
} catch (error) {
toast.add({
title: 'Error fetching products',
description: 'There was an error fetching the products. Please try again later.',
color: 'error'
})
} finally {
productsLoading.value = false
}
}
if (import.meta.client) {
initProducts()
}
</script>
<template>
<div>
<h1>Example using ref</h1>
<UTable :data="products" :loading="productsLoading" class="flex-1 max-h-[312px]" />
{{ products }}
<h1>Example using static data</h1>
<UTable :data="[
{ name: 'Product 1', price: '$10', description: 'Description of Product 1' },
{ name: 'Product 2', price: '$20', description: 'Description of Product 2' },
{ name: 'Product 3', price: '$30', description: 'Description of Product 3' }
]" class="flex-1 max-h-[312px]" />
</div>
</template>
<script lang="ts" setup>
definePageMeta({
middleware: ['auth']
})
const toast = useToast()
const products = ref()
const productsLoading = ref(true)
async function initProducts() {
try {
productsLoading.value = true
let resp = await $fetch('/api/staff/products', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
console.log('Products response:', JSON.stringify(resp))
products.value = JSON.parse(JSON.stringify(resp)).items
console.log('Products fetched:', products.value)
} catch (error) {
toast.add({
title: 'Error fetching products',
description: 'There was an error fetching the products. Please try again later.',
color: 'error'
})
} finally {
productsLoading.value = false
}
}
if (import.meta.client) {
initProducts()
}
</script>