Loop out async data in vue component

Question

I need to load async data and then loop it out in a vue component. I understand that the loop run before I have the data but I cant figure out how to rerun or hold the loop until I have the data. One solution I have tested and that dose not work is a loaded property in Data and a isLoaded computed function and after that -

                <div v-if="isLoaded">
                    <ul v-for="item in menu.items">
                        <li>{{ item.heading }}</li>
                    </ul>
                </div>

It seems that the loop runs anyway and I got error -

TypeError: Cannot read property 'items' of undefined

The whole page seems to freeze after that error so probably cant I set the Data property loaded to true in the async function. I have tested to run the async in both created and mounted hooks.

When I leave the page and come back everything works, probably because the data has been loaded. I have also tested to set the loded property by button click and it works fine when the loop are out comment and not when the loop run.

I thought this was the common solution after googling but I cant get it to work. Whats wrong or any other suggestions (my last one is to load the data in an other page).

See also -

export default {
    data() {
        return {
            loaded: false,

and -

computed: {
    isLoaded() {

        return this.loaded

    }

tony19 · Accepted Answer · 2022-07-16 01:52:27Z

1

The problems you may have met:

menu is null when compile the template, so as @ittus already answered, uses v-if to control the flow.
uses Vue API: $set when adding property into one object. (check Vue: Reactivity in Depth for more details)

So the codes will be like below demo:

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    menu: null,
    loading: false
  },
  mounted: function () {
    this.loading = true
    setTimeout(() => {
      this.menu = this.menu ? this.menu : {}
      this.$set(this.menu, 'items', [{'heading': 'a1'},{'heading': 'b1'}, {'heading': 'c1'}])
      this.loading = false
    }, 1500)
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
    <div v-if="!loading">
      <div v-if="menu">
        <ul v-for="item in menu.items">
            <li>{{ item.heading }}</li>
        </ul>
      </div>
      <p v-else>No Data</p>
    </div>
    <p v-else>Loading...</p>
</div>

edited Jul 16, 2022 at 1:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 13, 2018 at 16:29

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

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

4 Comments

user2856066 Over a year ago

So thats probably my problem. I need to use $set. But the object I try to copy (menu) is from Firebase and it seems that even if I call the getter in the callback (then) I still are to quick. If I do it in your timer everything works fine except that I need to give it a name (property) so it going to be menu.menu.items in the loop.

user2856066 Over a year ago

At least I thought I used a promise. I am using vuexfire and I dont think its a promise so now I need to figure it out. This sh... is to hard for me now :(

Sphinx Over a year ago

@user2856066, not sure what you mean, if vuexfire caused something wrong, you can add it to this question or post another one. for menu.menu.items you mentioned, probably you'd like to use like this.$set(this.$data, 'menu', newMenuItems)

user2856066 Over a year ago

Thanks a lot, its working. I had several errors and things I did not know. Loading, how to use $set and a callback / promise error from the store.

ittus · Accepted Answer · 2018-06-13 15:14:27Z

1

You can simply check menu is not undefined

<div v-if="menu && menu.items">
    <ul v-for="item in menu.items">
       <li>{{ item.heading }}</li>
    </ul>
 </div>

or in where you get data:

methods: {
  getData() {
    this.loaded = false
    callApi().then(res => {
      this.menu = res // example
      this.loaded = true
    })
  }
}

 <div v-if="loaded">
   <ul v-for="item in menu.items">
     <li>{{ item.heading }}</li>
   </ul>
 </div>

answered Jun 13, 2018 at 15:14

ittus

22.5k5 gold badges62 silver badges59 bronze badges

3 Comments

user2856066 Over a year ago

Thanks for your answer. With your first example the error are gone but the loop never runs again (when the data are loaded) which are strange. The second example is much like I do except that I do it in created or mounted hooks.

ittus Over a year ago

Can you use vue-devtools to inspect the value of menu variable?

user2856066 Over a year ago

Its undefined. So thats probably my problem and not the async and loading part. Sphinx above has also a good point and I will leave a comment there.

Collectives™ on Stack Overflow

Loop out async data in vue component

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related