Vue JS AJAX 计算属性答案

【问题标题】：Vue JS AJAX computed propertyVue JS AJAX 计算属性
【发布时间】：2017-06-30 19:15:26
【问题描述】：

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

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

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

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

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

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

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

 {{customer.fName}}

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

【问题讨论】：

查看 vue.js chrome 开发工具，它们非常适合检查变量的值等等。
您没有将承诺返回给异步。计算属性customer。也许那是你的问题。 return this.axios.get('/api/customer/get/' + this.$route.params.id).then(...).
这是因为计算属性期望返回一些东西。但我想知道你为什么要为这种类型的任务使用计算属性？
@BelminBedak 这是我第一个 vue js 项目。我很难在网上找到示例，但我发现这是最好的方法，但我绝对愿意听到更好或更简单的方法。

标签： asynchronous webpack vue.js axios

【解决方案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，它们让追踪变量和事件变得超级容易！

【讨论】：

您好，感谢您的回复。我目前仍然遇到错误。我想提一下，以防它增加了更多复杂性，但我将属性传递给子组件以进行显示。我将我的代码更改为看起来像您的代码并将每个属性初始化为“正在加载”页面显示加载文本应该在的位置，并且由于某种原因，当我添加像您上面那样的堆积生命周期挂钩时出现错误。 imgur.com/a/Pq3NO
好的，是的，这是我应该想到的错误。您需要在子组件的 props 中设置默认值，在该组件的 data() 函数中定义默认值，或者在引用 customer 的键的任何行上放置 v-if="customer"
我刚想到的一件事，this.axios 应该只是普通的axios，假设你使用了 Vue 和 Laravel 的默认设置。
实际上可能存在路由改变，但组件保留的情况。在这种情况下，组件不会检测到更改并且不会更新

【解决方案2】：

我认为您的错误在于命名。 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;
        }
    }

【讨论】：