asynchronous - Vue JS AJAX 计算属性

Question

好的，我相信我已经非常接近拥有我的第一个 Vue JS 应用程序了，但我一直在遇到一个又一个小问题。我希望这是最后一个小障碍。我正在使用 vue-async-computed和 axios 从我的 API 获取客户对象。

然后我将该属性传递给子组件并呈现到屏幕，如:{{customer.fName}}。

据我所知，正在进行 ajax 调用并且返回的响应是预期的，问题是页面上没有任何内容，客户对象似乎在 ajax 调用后似乎没有更新。

这是我正在处理的个人资料页面 .vue 文件

http://pastebin.com/DJH9pAtU

该组件有一个名为“customer”的计算属性，正如我所说，我可以在网络选项卡中看到，该请求正在发出并且没有错误。响应被发送到此处的子组件:

 <app-customerInfo :customer="customer"></app-customerInfo>

在该组件中，我将数据呈现到页面:

 {{customer.fName}}

但是，该页面没有显示任何结果。有没有办法在检查员中验证属性“客户”的值(value)？有什么明显的我想念的吗？

Answer 1

我已经使用 Vue 大约一年半了，我意识到处理异步数据加载和那些好东西的困难。以下是我将如何设置您的组件:

<script>
export default {

    components: {
      // your components were fine
    },

    data: () => ({ customer: {} }),

    async mounted() {
       const { data } = await this.axios.get(`/api/customer/get/${this.$route.params.id}`);
       this.customer = data;
    }
}
</script>

所以我所做的是在组件的数据函数中初始化customer，然后当组件获得mounted 时。 , 向服务器发送一个 axios 调用。当该调用返回时，将 this.customer 设置为数据。就像我在上面的评论中所说的，一定要查看 Vue's devtools ，它们使跟踪变量和事件变得非常容易!