Having some trouble with defining issues related to TypeScript in Vue. An error message
TS2339: Property 'product' does not exist on type '(LineItem[] | undefined)[K]'.'orderedItems': Array<LineItem>When inspecting purchaseInfo.value?.orderedItems in the console log, I notice that the deep object is still wrapped in a proxy and not properly unwrapped.
<script setup lang="ts">
interface LineItem {
'product': {
'id': number,
'sku': string,
'title': string,
'price': string,
'image': string,
'description': string,
},
'quantity': number;
}
export interface PurchaseInfo {
'address': string,
'city': string,
'zipCode': string,
'orderedItems': Array<LineItem>,
'orderStatus': string
}
let purchaseInfo = ref<PurchaseInfo | undefined>();
onMounted(async () => {
// this function fetchPurchaseInfo() returns a Promise<PurchaseInfo> which is return response.data as PurchaseInfo;
purchaseInfo.value = await fetchPurchaseInfo()
})
</script>
<template>
<div v-if="purchaseInfo">
<tr v-for="(item, index) in purchaseInfo?.orderedItems">
<th scope="row">{{ index + 1 }}</th>
<td>{{ item.quantity }}</td>
<td>{{ item.product.title }}</td>
</tr>
</div>
</template>