Vue js with axios - unexpected behaviour

Question

My WORKING piece of code in Vue js:

async mounted() {
            const token = this.$store.getters.loggedUser.token;

            incidents.getIncidentById(token, this.incidentId).then((resp) => {
                this.incidentData = resp.data;
            });

            incidents.getAllCriteria(token, this.incidentId)
                .then(resp => {
                    this.allCriteria = resp.data;
                })
                .then(() => {
                    this.sortAscendingByViolationCriteriumAndFactor();
                    this.setFactorCheckboxes();
                })
                .then(() => {
                    this.allCriteria.forEach(criteria => {
                        criteria.violationFactors.forEach(factor => {
                            this.setStateOfTheSameFactorsWithPlusAndMinus(factor);
                        });
                    });
                });
        },

Could you please explain me why the version below version doesn't work? I mean the method setStateOfTheSameFactorsWithPlusAndMinus doesn't work in this case (the method setStateOfTheSameFactorsWithPlusAndMinus is removed from this piece of code and moved to the method setFactorCheckboxes):

    async mounted() {
                const token = this.$store.getters.loggedUser.token;

                incidents.getIncidentById(token, this.incidentId).then((resp) => {
                    this.incidentData = resp.data;
                });

                incidents.getAllCriteria(token, this.incidentId)
                    .then(resp => {
                        this.allCriteria = resp.data;
                    })
                    .then(() => {
                        this.sortAscendingByViolationCriteriumAndFactor();
                        this.setFactorCheckboxes();
                    })
            },

 methods: {
            setFactorCheckboxes() {
                this.allCriteria.forEach(criteria => {
                    criteria.violationFactors.forEach(factor => {
                        this.selectDegree(factor);
this.setStateOfTheSameFactorsWithPlusAndMinus(factor); //doesn't work here!!!
                    });
                    this.updateScoreForCriteria(criteria);
                });
        }


 setStateOfTheSameFactorsWithPlusAndMinus(factor) {
                if (factor.factor.includes('(+)') || factor.factor.includes('(-)')) {
                    let checkbox = document.getElementById('checkbox' + factor.factor);
                    let factorName = factor.factor;
                    let factorType = factorName.slice(factorName.length - 3, factorName.length);
                    let checkboxBasicName = factorName.slice(0, factorName.length - 3);
                    let checkboxToFindAndChangeState = checkboxBasicName.concat(factorType === '(+)' ? '(-)' : '(+)');
                    let checkboxToDisable = document.getElementById('checkbox' + checkboxToFindAndChangeState);
                    if (checkbox.checked) {
                        checkboxToDisable.disabled = true;
                    } else {
                        checkboxToDisable.disabled = false;
                    }
                }
            },

It's very weird! "Doesn't work" means that the loaded page behaves very unpredictable - it seems that not all data are loaded and the method setStateOfTheSameFactorsWithPlusAndMinus can't check some checkboxes correctly

Len Joseph · Accepted Answer · 2019-06-06 18:21:11Z

1

Instead of calling async mounted, which cannot be done because lifecycle hooks are synchronous only, call an asynchronous method from mounted like this (remember async always requires await to return a promise):

mounted () {
   this.functionBlah();
}

...

methods: {
async functionBlah () {
    await actionX()
    .then(actionY)
    .then(actionZ)
    .catch(err => console.log(err))
    } 
}

answered Jun 6, 2019 at 18:21

Len Joseph

1,46812 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matexon Over a year ago

Hmm ok but why I can't just write functionBlah().then(...) Do I need async and await? But anyway - works perfectly :)

Len Joseph Over a year ago

Wrapping a function in a promise (which is what async-await is doing) means that your then statements will wait for the promise to resolve before executing. if you do not include async, using then is pointless because you would not be returning a promise beforehand. Think of it as "Resolve this promise, then do this."

Collectives™ on Stack Overflow

Vue js with axios - unexpected behaviour

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related