Search code examples
javascriptvue.jsvuejs3primevue

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

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

Solution

  • 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>