Vue JS AJAX计算属性

问题描述：

好吧，我相信我非常接近有我的第一个工作Vue JS应用程序，但我一直在小小的障碍后打小绊脚石。我希望这是最后一个小小的障碍。我正在使用vue-async-computed和axios从我的API中获取客户对象。Vue JS AJAX计算属性

然后，我将该属性传递给子组件并呈现为像{{customer.fName}}这样的屏幕。

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

这里是我工作的

http://pastebin.com/DJH9pAtU

组件有一个名为“客户”一个计算性能，正如我说的，我可以在网络选项卡中看到的个人资料页.vue文件时，正在提出请求，并且没有错误。响应被送到这里的子组件：

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

该组件内我呈现的数据页：

{{customer.fName}}

但是，页面显示没有结果。有没有办法来验证检查员中的“客户”属性的价值？有什么明显的我失踪？

退房的vue.js Chrome浏览器开发工具，他们是伟大的用于检查的变量的值，什么不是。 – dargue3

你没有回复异步的承诺。计算属性'客户'。也许这是你的问题。 'return this.axios.get（'/ api/customer/get /'+ this。$ route.params.id）.then（...）'。 – AWolf

这是因为计算属性期望返回一些东西。但我想知道为什么你使用这种类型的任务的计算属性？ –

答

我一直在使用Vue约一年半，我意识到处理异步数据加载和那些好东西的斗争。下面是我会成立您的组件：

<script> 
export default { 

    components: { 
     // your components were fine 
    }, 

    data: function() { 
     return { 
     customer: {}, 
     } 
    }, 

    mounted: function() { 
     this.axios.get('/api/customer/get/' + this.$route.params.id) 
      .then(function(response){ 
      this.customer = response.data; 
      }.bind(this)); 
    } 
} 
</script>

所以我所做的就是初始化数据功能customer您的组件，那么当组件获得mounted，发送axios调用服务器。当该呼叫返回时，将this.customer设置为该数据。就像我在上面的评论中所说的那样，肯定会检查出Vue's devtools，他们让追踪变量和事件变得非常简单！

嘿，谢谢你的回复。我目前仍然遇到错误。我想提一下，如果它增加了更多的复杂性，但我将该属性传递给子组件以显示。我改变了我的代码，看起来像你的，并初始化为“加载” 页面显示加载的文本应该是什么，以及由于某些原因的错误，当我添加像上面你的生命周期钩。 http://imgur.com/a/Pq3NO – Ampix0

好的，是的，这是我应该想到的一个错误。您需要为子组件的props中设置默认值，在此组件的data（）函数中定义默认值，或者在引用某个键的任何行上放置一个v-if =“customer” 'customer' – dargue3

有一件事我只是想，'this.axios'应该只是常规'axios'，假设你使用了Vue和Laravel的默认设置。 – dargue3

答

我相信你的错误是命名。 vue-async-computed插件需要Vue对象的新属性。另外，我认为异步函数应该返回一个Promise，但可能是错误的。

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

应该是：

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

Vue JS AJAX计算属性

相关推荐