Vue Reactivity (component not updating)

Question

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

Terry · Accepted Answer · 2022-02-28 10:12:19Z

1

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();
},

answered Feb 28, 2022 at 10:12

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Reactivity (component not updating)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related