Composables
useGSheetAsObject
Petakan baris header pertama menjadi objek JavaScript secara otomatis.
Composable useGSheetAsObject memetakan baris-baris spreadsheet menjadi array objek key-value menggunakan label header kolom pada baris pertama.
Signature
function useGSheetAsObject<T = any[]>(
range: string,
options?: ComposablesOptions
): {
data: Ref<T | null>
pending: Ref<boolean>
error: Ref<FetchError | null>
refresh: () => Promise<void>
execute: () => Promise<void>
status: Ref<'idle' | 'pending' | 'success' | 'error'>
}
Cara Kerja
Jika range spreadsheet kamu A1:C3 berisi:
| A | B | C |
|---|---|---|
| id | name | price |
| 101 | Wireless Mouse | 29.99 |
| 102 | Mechanical Keyboard | 89.99 |
Maka useGSheetAsObject('A1:C3') menghasilkan output:
[
{ "id": 101, "name": "Wireless Mouse", "price": 29.99 },
{ "id": 102, "name": "Mechanical Keyboard", "price": 89.99 }
]
Contoh Penggunaan
pages/products.vue
<script setup lang="ts">
interface Product {
id: string
name: string
price: string
}
const { data: products, pending } = await useGSheetAsObject<Product[]>('A1:C50', {
sheet: 'products'
})
</script>
<template>
<div v-if="pending">Memuat produk...</div>
<ul v-else>
<li v-for="product in products" :key="product.id">
{{ product.name }} - ${{ product.price }}
</li>
</ul>
</template>