Аксиос на шаг впереди V-модели Vue - PullRequest
Новая
       15

Аксиос на шаг впереди V-модели Vue

0 голосов
/ 02 мая 2019

У меня проблемы с выяснением, почему мой метод записывает шаг перед фактическим.Поэтому, если я выберу 1 в поле, а затем 2, я ничего не выведу, а затем 1.

Вот мой код: 

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

Это в основном вызывает функцию @change.Это дает мне идентификатор подарочной карты в качестве параметра.Затем вызываемая им функция: 

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;
            }
        }

Часть console.log всегда отстает на один шаг.Я не могу понять, почему.Это мой контроллер, если необходимо: 

public function show($id)
{

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

    return $bonCadeau;
}

Редактировать: нормальный код с использованием свойства привязки vModel 

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;
            }
        }

Мне кажется, vGiftCard обновляется после вызова функции "CalculateNet"

1 Ответ

1 голос
/ 02 мая 2019

Причина в том, что результат HTTP-запроса, возвращенного Axios, является асинхронным, вы не получите его сразу в функции fetchOneBonCadeau.

Однако вы можете вернуть обещание Axios изfetchOneBonCadeau и используйте его в calculateNet.

Таким образом, вы можете реализовать fetchOneBonCadeau следующим образом: 

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

И calculateNet следующим образом: 

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;
        }
    });
   )
}

Реализация логики с использованием переменной bonCadeauPourAxios в обратном вызове "then" гарантирует, что переменная будет получена из серверной части.

...