I have a puted property that triggers an API call and returns the data:

async ingredients() {
    const url = "/api/ingredients";

    const request = new Request(url, {
      method: "GET",
      credentials: "same-origin"
    });

    const response = await fetch(request);
    const json = await response.json();
    //debugger;
    return json;
}

The debugger I have in there catches when the page is loading and has all the data that I expect to see (variable json is an array with my items inside it).

But when I look at the Vue ponent in the Vue Dev tools, it just says:

ingredients:Promise

I use this same structure at work all the time, but I can't figure out what's different about this. If I hit the API route in my browser, I see the expected JSON.

I'm iterating over it like:

<tr v-for="(ingredient, index) in ingredients" :key="index">

But as ingredients here just refers to a Promise, the table isn't rendered.

I'm not sure it matters but I'm using a Vue/Laravel mix. The Laravel side is working pletely fine, the API call es back in the URL I expect.

I have a puted property that triggers an API call and returns the data:

async ingredients() {
    const url = "/api/ingredients";

    const request = new Request(url, {
      method: "GET",
      credentials: "same-origin"
    });

    const response = await fetch(request);
    const json = await response.json();
    //debugger;
    return json;
}

The debugger I have in there catches when the page is loading and has all the data that I expect to see (variable json is an array with my items inside it).

But when I look at the Vue ponent in the Vue Dev tools, it just says:

ingredients:Promise

I use this same structure at work all the time, but I can't figure out what's different about this. If I hit the API route in my browser, I see the expected JSON.

I'm iterating over it like:

<tr v-for="(ingredient, index) in ingredients" :key="index">

But as ingredients here just refers to a Promise, the table isn't rendered.

I'm not sure it matters but I'm using a Vue/Laravel mix. The Laravel side is working pletely fine, the API call es back in the URL I expect.

• javascript
• laravel
• vue.js
• vuejs2
• puted-properties

• 1 Possible duplicate of Async Computed in Components - VueJS? – tony19 Commented Feb 6, 2019 at 23:53

1 Answer 1

The reason here is that puted properties won't actually update after the promise is pleted as they operate on setters and getters - so using vuex dispatch here or any other promise will not work.

If you trigger your function on created() lifecycle then that should do it. Additionally, if you need to be able to change the recipe dynamically you can set a watcher to catch any updates.

data: () => ({
    ingredients: null,
})

watch: {
    ingredients(nexVal, preVal) {
        // do some stuff here
    }
}

created() {
    this.ingredients = myAsyncCallForIngredients()
}