how do i properly assign the products variable to the array from the response from my api-CodePudding

im trying to use a primeblocks component and i need to v-bind a the dataTable to the response from my api

this is where im stuck: when i console.log(productData) i get an array containing the array of all my products which came from my 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>

this is my console.log

[]
value: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 0
[[Prototype]]: Array(0)

im clearly doing something wrong, if anyone can point me in the right direction that would be awesome

CodePudding user response：

You are logging outside of the component (when the component is parsed). You probably want to console inside the loadProducts function, after you've awaited response.

Another problem is productData is not reactive.
You probably want to use: this.productData = response.data.products.
You don't need the external productData (at least in what you've shown so far).

Here's how I'd write your component using Options API:

<template>
  <DataTable :value="products" responsiveLayout="scroll">
    <Column v-for="col in columns" :key="col.field" v-bind="col" />
  </DataTable>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    products: [],
    columns: [
     { field: 'SKU', header: 'Code' },
     { field: 'name', header: 'Name' },
     { field: 'brand', header: 'Brand' },
     { field: 'color', header: 'Color' }
    ]
  }),
  mounted() {
    axios.get("http://localhost:1337/products")
      .then(({ data }) => this.products = data?.products || [])
  }
}
</script>

CodePudding user response：

I don't quite see why you're using loadProducts, since it could also be solved using the .then keyword as such (which IMO is a lot neater to look at and also does it asynchronously):

axios.get("http://localhost:1337/products").then(res=>{
   this.productData = res.data.products;
})

Also if possible, don't use null but [] instead when declaring data properties in vue/nuxt.

Cheers!

CodePudding user response：

it should be

productData.push(...response.data.products)