我需要使用AJAX调用的结果来初始化Vue组件的数据。我尝试了以下方法：
data: function () {
return {
supplierCount: 0
}
},created: function () {
axios.get("/supplier/list").then(response => {
this.supplierCount = response.data.length;
});
}
但是，这种方法不起作用，因为模板可以在AJAX处理程序更新supplierCount之前访问数据。
用异步调用的结果初始化数据的正确方法是什么？例如，如果我从data返回一个Promise（而不是一个对象），那么Vue会等到拒绝/解决Promise之前，才将数据公开到模板吗？
我认为您不能强迫组件仅在ajax调用之后进行初始化，但是您可以 将其配置为在加载ajax数据之前隐藏，方法是使用CSS隐藏它（使用v-show）或仅阻止渲染（使用v-if）。
例如，您可以向组件添加属性hasLoaded，然后将v-show或v-if绑定到它，如下所示：
在您的js上：
data: function () {
return {
supplierCount: 0,hasLoaded: false
}
},created: function () {
axios.get("/supplier/list").then(response => {
this.supplierCount = response.data.length;
this.hasLoaded = true;
});
}
在模板上：
<!-- The top element is your root element,and you should always render it,so the v-show is appended to the immediate child -->
<div>
<div v-show="hasLoaded">
<!-- the rest of your template goes here -->
</div>
</div>
有条件地呈现模板html。
我认为这是最好的方法-如果条件失败，则不会添加任何内容。
<div v-if="supplierCount">
</div>