cinder hawk
I have been trying to get this to work for days now. Even tried the GitHib Copilot Chat which helped to get rid of Typescript errors but I still am unsuccessful in getting the products to display?
Everythig in the composable seems to work ouyt fine. The console log after sayd 51 products were returned, yet the v-for never does what it should.
The console log:
useAirtable.ts | Fetching products from Airtable... useAirtable.ts | Records retrieved.. useAirtable.ts | loading is now set to false Products after fetchProducts: 51
the index.vue file
`<template>
<div>
<h1>Products</h1>
<ul>
<li v-for="product in products" :key="product.productcode">
<h2>{{ product.style }}</h2>
<p>{{ product.description }}</p>
</li>
</ul>
<div v-if="loading">Loading...</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
interface ProductRecord {
productcode: string
stylecode: string
collectioncode: string
style?: string
category?: string
teaser?: string
description?: string
careinstructions?: string
rrp?: string
images: { filename: string, url: string }[]
}
export default defineComponent({
name: 'Products',
setup() {
const products = ref<ProductRecord[]>()
const loading = ref(false)
const { fetchProducts } = useAirtable()
fetchProducts().then((fetchedProducts) => {
products.value = fetchedProducts
console.log('Products after fetchProducts:', products.value?.length)
})
return {
products,
loading
}
}
})
</script>`
cold cosmos