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?

check out the vue.js chrome dev tools, they're great for inspecting the values of variables and what not. — dargue3, Feb 12 '17 at 21:26
you're not returning the promise to the async. computed property `customer`. Maybe that's your problem. `return this.axios.get('/api/customer/get/' + this.$route.params.id).then(...)`. — AWolf, Feb 12 '17 at 21:43
It's because computed properties expect something to be returned.But I'm wonder why you are using computed property for this type of task ? — Belmin Bedak, Feb 12 '17 at 22:21
@BelminBedak this is my first ever vue js project. I have had a hard time finding examples online but what I have found has told me this is the best way to do it, but im absolutely open to hearing better or easier ways. — Ampix0, Feb 13 '17 at 00:16

score 10 · Answer 1 · edited Jul 17 '22 at 23:39

10

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!

edited Jul 17 '22 at 23:39

tony19

125,647
18
229
307

answered Feb 13 '17 at 01:30

dargue3

2,802
2
14
23

Hey thanks for your response. Im still running into an error currently. I want to mention in case it adds more complexity, but I am passing the property to a child component to display. I changed my code to look like yours and initialized each property as "loading" The page shows loading where the text should be and for some reason errors when I add the mounded life cycle hook like in yours above. http://imgur.com/a/Pq3NO – Ampix0 Feb 13 '17 at 03:07
okay, yeah that's a bug I should have thought of. You need to either set a default in the props for your child component, define defaults in the `data()` function of this component, or put a `v-if="customer"` on any lines where you reference a key off of `customer` – dargue3 Feb 13 '17 at 03:37
one thing I just thought of, `this.axios` should just be regular `axios`, assuming you used the default setup for Vue and Laravel. – dargue3 Feb 14 '17 at 16:05
actually there can be a case when route changes, but component stays. in that case component won't detect the change and won't update – igor May 05 '18 at 23:15

austin_ce · Answer 2 · 2021-11-01T14:23:14.627

I believed your error is with naming. The vue-async-computed plugin needs a new property of the Vue object.

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

should be:

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

Vue JS AJAX computed property

2 Answers2