使用 AJAX 调用的结果初始化 Vue 数据答案

【问题标题】：Intialize Vue data with the result of an AJAX call使用 AJAX 调用的结果初始化 Vue 数据
【发布时间】：2025-12-04 02:45:01
【问题描述】：

我需要使用 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 被拒绝/解决后再将数据暴露给模板？

【问题讨论】：

标签： javascript ajax vue.js promise

【解决方案1】：

我认为您不能强制您的组件仅在 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>

【讨论】：

【解决方案2】：

有条件地呈现您的模板html。

这是我认为最好的方式 - 如果条件失败，则不会向 DOM 添加任何内容。

 <div v-if="supplierCount">

</div>

【讨论】：