Found a bug or some undocumented edge case

[Sebbito]

About this

This will be a longer description since I can't correctly classify where this bug stems from yet I do know how to fix it.

Project dependencies:

├── @types/node@18.15.7
├── @vitejs/plugin-vue@4.1.0
├── @vue/tsconfig@0.1.3
├── axios@1.3.4
├── bootstrap@5.2.3
├── npm-run-all@4.1.5
├── typescript@4.8.4
├── vite@4.2.1
├── vue-axios@3.5.2
├── vue-router@4.1.6
├── vue-tsc@1.2.0
└── vue@3.2.47

What i wanted to happen

I wanted a parent component to call the getCosts() Method of an API Class and pass the result to a child component that uses this data to generate HTML via a v-for loop for each cost returned by getCosts.

What actually happend

The program always fetched the data but in Chrome it only sometimes filled the child component.
Depending on the environment the results also differed.

For Chrome:
In develop and preview mode (npm run dev or npm run preview) the site was always generated correctly.
The compiled version of the project had this random behaviour.

For Firefox:
Firefox never generated the site parts.

I didn't test other Browsers.

Code

I will only post the relevant snippets here. For the parts that were never declared anywhere: just assume that they're there and do what they say.

This was the Parent component that called the API and also used the child component:

<script>
// ...
created() {
        // getApiEndpoint returns a new Object which implements the API Interface
        let result = API.getApiEndpoint().getCosts()
        this.costs = result.costs;
    },
components: {
        // The Component in question
        OptionalCosts: defineAsyncComponent({
            loader:() => import('./components/OptionalCosts.vue'),
            // A component to use while the async component is loading
            loadingComponent: LoadingComponent,
            delay: 0,
        }),
},
// ...
</script>

<template>
    ...
    <OptionalCosts :costs = "costs"/>
    ...
</template>

The OptionalCosts component used costs as prop like this:

<div v-for="cost of costs">
    ...
</div>

This was a cutout from the API Module that held the used API Class and Interface definition:

// Costs that were used by child
import Cost from './Cost.js';

export class APIWrapper implements API {
    // ...

    _get(url: string): any {
        try {
            return axios.get(this.cms_url + url, {
                headers: {
                    "Authorization": "Bearer " + this.cms_token,
                }
            }).then(response => {
                    return response.data;
                });
        } catch (error) {
            console.log(`API ERROR: ${error}`)
            throw error
        }
    }

    // Problems occur here probably due to me not using the callbacks correctly
    getCosts(): Cost[] {
        let costs = [] as Cost[];
        this._get(`/items/Cost`)
            .then((data: any) => {
                data["data"].forEach((element: any) => {
                    costs.push(new Cost(
                        element["name"],
                        element["price"]
                    );
                });
            })

        return costs;
    }

Fix

The really relevant part is the function in the API that I commented. It seems like using the result of the API call like that will not allow the Component to update correctly once the data has been received.

To fix this i made the getCosts function take the array from the parent component and fill it with data instead:

getCosts(costs: Cost[]) : void{
    this._get(`/items/Cost`)
        .then((data: any) => {
            data["data"].forEach((element: any) => {
                costs.push(new Cost(
                    element["name"],
                    element["price"]
                );
            });
        })
}

Makes for a function call like this in the parent component:

<script>
// ...
created() {
        // getApiEndpoint returns a new Object which implements the API Interface
        API.getApiEndpoint().getCosts(this.costs)
    },
</script>

This works as intended.

Why?

Now why does it only behave as expected when I set the values in the callback of the this._get() method? I know it makes more sense but shouldn't it work regardless?

I don't really see the difference between the two implementation and why one behaves very different from the other especially since it says nowhere not to do it like I've done it in the first draft.

Does it have to do with promises and the execution time of the callback?

Could it be that the costs.push is only executed after evaluating the promise has been resolved and in the first draft i get no data since the promise still didn't resolve by then?