Axios one step behind vue's v-model

Question

I've trouble finding out why my method logs the step before the actual one. So If I select 1 in a box and then 2, I'll get printed out nothing then 1.

Here is my code :

<b-form-select @input="setCadeauOrReduction(vGiftCard)" @change="calculateNet(vGiftCard)" v-if="this.cadeauOrReduction != 'reduction'" v-model="vGiftCard" id="bonCadeauSoin">
                                    <option></option>
                                    <option v-for="boncadeau in boncadeaus" :key="boncadeau.id" v-bind:value="boncadeau.id">
                                        <p>N° </p>
                                        {{boncadeau.serialNumberProduct}}
                                        <p>|</p>
                                        {{boncadeau.amountOfCard}}
                                        <p>CHF</p>
                                    </option>
                                </b-form-select>

This basically calls the function @change. It gives me the Gift card's id as parameter. Then the function it calls :

fetchOneBonCadeau(idToFetch)
        {
            axios.get('/bonCadeaus/' + idToFetch)
            .then((res) => { 
                this.bonCadeauPourAxios = res.data
            })
            .catch((err) => {
                console.log(err);
            })

            return this.bonCadeauPourAxios;
        },

        //Calculer montant net
        calculateNet(value)
        {
            console.log(this.fetchOneBonCadeau(value));


            if(this.vReasonReduction)
            {   
                this.vCostNet = this.vCostBrut - this.vCostBrut * this.vReasonReduction.reductionAmount;
            }
            else
            {
                this.vCostNet = this.vCostBrut;
            }
        }

The console.log part always lags one step behind. I can't figure why. This is my controller if needed :

public function show($id)
{

    $bonCadeau = BonCadeau::where('id', $id)->first();

    return $bonCadeau;
}

Edit : normal code using the vModel binding property

fetchOneBonCadeau(idToFetch)
        {
            axios.get('/bonCadeaus/' + idToFetch)
            .then((res) => { 
                this.bonCadeauPourAxios = res.data
            })
            .catch((err) => {
                console.log(err);
            })     
        },

        //Calculer montant net
        calculateNet(value)
        {
           this.fetchOneBonCadeau(value);

            console.log(this.bonCadeauPourAxios); //Is one step behind, first value is empty

            if(this.vReasonReduction)
            {   
                this.vCostNet = this.vCostBrut - this.vCostBrut * this.vReasonReduction.reductionAmount;
            }
            else
            {
                this.vCostNet = this.vCostBrut;
            }
        }

I feel like vGiftCard is updated after the function "calculateNet" is called

Answer 1

The reason is that the result of the HTTP request returned by Axios is asynchronous, you will not obtain it right away in the fetchOneBonCadeau function.

What you can do however is return the axios promise from fetchOneBonCadeau and use it in calculateNet.

So you can implement fetchOneBonCadeau like this:

fetchOneBonCadeau(idToFetch)
{
    return axios.get('/bonCadeaus/' + idToFetch)
        .then(res => res.data)
        .catch(err => {
            console.log(err);
        })     
},

And calculateNet like this:

calculateNet(value)
{
    this.fetchOneBonCadeau(value).then( (bonCadeauPourAxios) => {
        console.log(bonCadeauPourAxios);

        if(this.vReasonReduction)
        {   
            this.vCostNet = this.vCostBrut - this.vCostBrut * this.vReasonReduction.reductionAmount;
        }
        else
        {
            this.vCostNet = this.vCostBrut;
        }
    });
   )
}

Implementing the logic using the bonCadeauPourAxios variable in the "then" callback guaranties that the variable will have been retrieved from the backend.