CODEWITHSUNDEEP
vue.jsvuex
Kevin Dev
Kevin Dev

Reputation: 231

Vue Reactivity (component not updating)

I have a list I want to update with data from an API call - done this many times and works OK, but I must be doing something different with this solution is the list is not updating when data is returned from the API call:

<template>
Set list: {{setList}}

<div v-for="(set, index) in setList">
  {{ set.title }}
   // index is used in the loop...
</div>

</template>

<script>
import queries from '../api/queries'
export default {

 data: () => ({
   setList: []
 }),

 created() {
   this.setList = queries.getSetList();
 },
   ....

</script>



queries.js


async getSetList () {

 let setList=[];

   await API.graphql({
       setList=get the data
   }).then((response) => {
       return(setList)   
   })
 }

The print statement: Set List: [object Promise] and the list is not printed in the for loop.

The promise does return with data (showing in the dev console).

I had a similar query resolved by @IVOGELOV (thank you!) here and looking for a non vuex solution.

Thanks

Upvotes: 0

Views: 177

Answers (1)

Terry
Terry

Reputation: 66228

This is not a VueJS- or a VueX-related issue per se, but more about understanding how promises and await/async work.

First you need to ensure that queries.getSetList is actually returning a promise:

async getSetList () {
    let setList = [];

    await API.graphql({
        // setList = ...
    });

    return setList;
}

And then ensure that you are actually awaiting it when invoking it:

async created () {
    this.setList = await queries.getSetList();
},

Upvotes: 1

Related Questions