CODEWITHSUNDEEP
javascripttypescriptvue.jsasynchronous
Bob Tway
Bob Tway

Reputation: 9613

Binding a Vue property to an asynchronous value

I have a Vue block that I need to bind to a boolean property:

<div class="row" v-if.sync="isThisAllowed">

To calculate that property I need to make an API call using Axios, which has to be asynchronous. I've written the necessary code to get the value:

public async checkAllowed(): Promise<boolean> {

    var allowed  = false;
    await Axios.get(`/api/isItAllowed`).then((result) => {
        var myObjects = <MyObject[]>result.data.results;
        myObjects.forEach(function (object) {
            if (object.isAllowed == true) {
                hasValuedGia = true;
            }
        })
    });

    return allowed;
}

What I did then - I'm not very experienced with Vue - is to add a property to the Vue model and assign a value to it in created:

public isThisAllowed: boolean = false;

async created() {
    this.checkAllowed().then(result => {
        this.isThisAllowed = result;
    });
}

This works in the sense that the value I'm expecting is assigned to the property. But Vue doesn't like it and complains

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Most of the values on the model are exposed via getters:

get isSomethingElseAllowed(): boolean {
    return this.productCode === ProductTypes.AcmeWidgets; 
}

But I need to "await" the value of the async function, which would mean making the getter async which then, of course, makes it a Promise and I can't bind that to my model?

What's the right way to go about this?

Upvotes: 0

Views: 1515

Answers (1)

Eazash
Eazash

Reputation: 127

You can't define a property that way, instead define isThisAllowed in the data object as

data: function(){
    return {
        isThisAllowed: false
    }
}

And make checkAllowed into a normal function and set this.isThisAllowed = allowed inside it

Upvotes: 1

Related Questions