将Vue属性绑定到异步值

Question

我有一个Vue块，需要绑定到一个布尔属性：

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

为了计算该属性，我需要使用Axios进行API调用，这必须是异步的。我已经编写了获得值所需的代码：

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

我当时所做的——我对Vue不是很有经验——是在Vue模型中添加一个属性，并在created:中为其赋值

public isThisAllowed: boolean = false;
async created() {
this.checkAllowed().then(result => {
this.isThisAllowed = result;
});
}

这样做的意义是，我期望的值被分配给了属性。但Vue不喜欢它，并抱怨

避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。

模型上的大多数值都是通过getters暴露的：

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

但我需要"；等待"；async函数的值，这意味着使getter异步，当然，这会使它成为Promise，而我不能将其绑定到我的模型？

对此，正确的做法是什么？

Answer 1

不能用这种方式定义属性，而是在数据对象中定义isThisAllowed作为

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

并将checkAllowed设为一个正常函数，并在其中设置this.isThisAllowed = allowed