Vue JS AJAX computed property

Question

Ok, I believe I am VERY close to having my first working Vue JS application but I keep hitting little snag after little snag. I hope this is the last little snag. I am using vue-async-computed and axios to fetch a customer object from my API.

I am then passing that property to a child component and rendering to screen like: {{customer.fName}}.

As far as I can see, the ajax call is being made and the response coming back is expected, the problem is there is nothing on the page, the customer object doesnt seem to update after the ajax call maybe.

Here is the profile page .vue file I'm working on

http://pastebin.com/DJH9pAtU

The component has a computed property called "customer" and as I said, I can see in the network tab, that request is being made and there are no errors. The response is being sent to the child component here:

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

within that component I am rendering the data to the page:

 {{customer.fName}}

But, the page shows no results. Is there a way to verify the value of the property "customer" in inspector? is there something obvious I am missing?

Answer 1

I've been using Vue for about a year and a half, and I realize the struggle that is dealing with async data loading and that good stuff. Here's how I would set up your component:

<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>

so what I did was initialize customer in the data function for your component, then when the component gets mounted, send an axios call to the server. When that call returns, set this.customer to the data. And like I said in my comment above, definitely check out Vue's devtools, they make tracking down variables and events super easy!