Asynchronous Vue JS AJAX计算属性

好的，我相信我很快就要拥有我的第一个Vue JS应用程序了，但我一直遇到一个又一个小问题。我希望这是最后一个小障碍。 我正在使用和axios从API获取客户对象

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

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

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

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

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

---

但是，该页面没有显示任何结果。是否有办法在inspector中验证属性“customer”的值？有什么明显的地方我遗漏了吗？

我已经使用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>

导出默认值{
组成部分：{
//你的部件很好
},
数据：（）=>（{客户：{}}），
异步装入（）{
const{data}=wait this.axios.get（`/api/customer/get/${this.$route.params.id}`）；
这个客户=数据；
}
}

---

因此，我所做的是在组件的数据函数中初始化

customer

，然后当组件获取时，向服务器发送

axios

调用。当该调用返回时，将

this.customer

设置为数据。正如我在上面的评论中所说的，绝对要检查一下，它们使跟踪变量和事件变得非常容易

我认为你的错误在于命名。

vue async computed

插件需要vue对象的新属性

computed: {
    customer: async function() {
        this.axios.get('/api/customer/get/' + this.$route.params.id).then(function(response){
        return(response.data);
        });
    }
}

应该是：

asyncComputed: {
    async customer() {
        const res = await this.axios.get(`/api/customer/get/${this.$route.params.id}`);
        return res.data;
    }
}

---

查看vue.js chrome开发工具，它们非常适合检查变量的值等等。您不会将承诺返回给异步。计算属性

客户

。也许这是你的问题

返回这个.axios.get（'/api/customer/get/'+this.$route.params.id）。然后（…）

。这是因为计算属性期望返回一些东西。但是我想知道为什么您要使用计算属性来执行这种类型的任务？@BelminBedak这是我第一个vue js项目。我很难在网上找到例子，但我发现这是最好的方法，但我绝对愿意听到更好或更简单的方法。嘿，谢谢你的回复。我目前仍然遇到一个错误。我想提一下，以防它增加了更多的复杂性，但我将属性传递给子组件以显示。我修改了代码，使其看起来像您的代码，并将每个属性初始化为“加载”。页面显示加载文本的位置，并且由于某些原因，当我添加上面您所述的堆状生命周期挂钩时出现了错误。好的，是的，这是一个我应该想到的错误。您需要在您的子组件的道具中设置默认值，在该组件的

data（）

函数中定义默认值，或者在您引用

customer

的任何行上放置

v-if=“customer”

，我刚刚想到的一件事是，

this.axios

应该是常规的

axios

，假设您使用了Vue和Laravel的默认设置。实际上，可能会出现路由更改但组件保持不变的情况。在这种情况下，组件不会检测到更改，也不会更新

asyncComputed: {
    async customer() {
        const res = await this.axios.get(`/api/customer/get/${this.$route.params.id}`);
        return res.data;
    }
}