Waiting to render template before axios has returned response

[leecraigjeffries]

Hi All

I have some code and I'm trying to wait until a property has been populated before a component is rendered, how do I get around this?

`
created() {
this.x = this.getBaseCalendarShifts();
console.log(this.x); // gives a promise object
this.getDates();
},

methods: {
    async getBaseCalendarShifts() {
        try {
            const response = await axios.post(this.route, null, {
                params: {
                    year: this.year
                }
            });
            return response.data;
        } catch (error) {
            flash('error', error);
        }
    },`

[Yordan-Ramchev]

@leecraigjeffries
You can declare the created () method as async and perform our asynchronous method inside or something like this (This ensures that your component waits for the necessary data to be loaded before proceeding with any dependent operations.):

created() {
    this.initializeData();
},

In methods:

async initializeData() {
    try {
        this.x = await this.getBaseCalendarShifts();
        console.log(this.x); // Now it should log the resolved value, not a promise
        this.getDates();
    } catch (error) {
        flash('error', error);
    }
},