I have a situation where I need to make an API call in my layout and send the received data as an object to my component.
The problem arises because the object is empty when the method is called inside the mounted() function. Therefore, I want to execute this function only if there is actually data returned from the API service.
axios.get('/class')
.then((response) => {
console.log(response.data.results)
response.data.results.forEach(element => {
const object = {
clientId: element.client.objectId,
price: element.price || 0,
driverId: element.objectId || null
}
this.serviceData.tripsInfo.push(object) // The object that will be sent to the component
...
HTML :
<class title="List of class" :points="serviceData"/>
class component:
props: {
points: {} // This is where the layout data will be stored
},
mounted () {
console.log(this.points)
const reducer = (accumulator, currentValue) => accumulator + currentValue
this.totalPrices = this.points.class.map(x => x.price).reduce(reducer) // Facing an issue here ("Reduce of empty array with no initial value")
},