I am currently trying to implement a primeblocks component and I am struggling with v-binding the dataTable to the response I receive from my API.
My issue lies in the fact that when I console.log(productData), I am getting an array that contains another array of all my products fetched from the API, instead of a regular array.
<template>
<div>
<DataTable :value="productData" responsiveLayout="scroll">
<Column field="SKU" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</template>
<script>
import axios from 'axios';
let productData = [];
export default {
data() {
return {
productData: null
}
},
mounted() {
const loadProducts = async () => {
const response = await axios.get("http://localhost:1337/products")
productData.value = response.data.products;
};
loadProducts()
},
console.log(productData)
}
</script>
Below is the console.log output:
[]
value: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 0
[[Prototype]]: Array(0)
It is clear that I am making a mistake somewhere. Any guidance or advice on how to correct this issue would be greatly appreciated.