好的，我相信我已经非常接近拥有我的第一个 Vue JS 应用程序了，但我一直在遇到一个又一个小问题。我希望这是最后一个小障碍。 我正在使用 vue-async-computed和 axios 从我的 API 获取客户对象。
然后我将该属性传递给子组件并呈现到屏幕，如:{{customer.fName}}。
据我所知，正在进行 ajax 调用并且返回的响应是预期的，问题是页面上没有任何内容，客户对象似乎在 ajax 调用后似乎没有更新。
这是我正在处理的个人资料页面 .vue 文件
该组件有一个名为“customer”的计算属性，正如我所说，我可以在网络选项卡中看到，该请求正在发出并且没有错误。响应被发送到此处的子组件:
<app-customerInfo :customer="customer"></app-customerInfo>
在该组件中，我将数据呈现到页面:
{{customer.fName}}
但是，该页面没有显示任何结果。有没有办法在检查员中验证属性“客户”的值(value)？有什么明显的我想念的吗？
最佳答案
我已经使用 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 ，它们使跟踪变量和事件变得非常容易!
关于asynchronous - Vue JS AJAX 计算属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42193278/