Why loading text doesn't show in vue js?

Question

I have like this code in my app:

<div id="app">
  <button v-if="!isLoaded && !isLoading" @click="startLoading()">Start Loading</button>
  <div v-if="isLoading">Loading app...</div>
  <template v-else>
    <img v-show="isLoaded" ref="img" />
  </template>
</div>

<script>
new Vue({
  el: "#app",
  data() {
    return {
      isLoading: false,
      isLoaded: false,
    }
  },
  mounted() {
     
  },
  methods: {
    startLoading() {
      this.isLoading = true;    
      
      for (let i = 1; i < 1E9; ++i) {
         //Dummy load;
         const a = 1;
        }
      this.isLoading = false;   
      this.isLoaded = true; 
        
      this.$refs.img.src = 'https://cdn.pixabay.com/photo/2018/07/04/11/58/xiamen-3515964__340.jpg';
    }
  },
})
</script>

In this code, when you click on the "Start Download" button, the message "Loading..." should appear for a while, after which the image will appear. But there is no sign "Loading". Why? Can this be fixed? If so, correct it. (It is undesirable to remove the dummy load. Imagine that we are there very intensively processing some file for the user)

tao · Accepted Answer · 2021-06-24 11:11:02Z

1

If the code execution has to wait for the loop to finish, mark startLoading as async (so you can use await inside of it) and use await on whatever promises your loop awaits. Basic example:

methods: {
  async startLoading() {
    this.isLoading = true;    

    for (let i = 1; i < 1E9; ++i) {
      const a = await // your promise here;
      // do stuff with `a`
    }
    this.isLoading = false;   
    this.isLoaded = true; 

    this.$refs.img.src = 'https://cdn.pixabay.com/photo/2018/07/04/11/58/xiamen-3515964__340.jpg';
  }
}

Docs and examples here.

edited Jun 24, 2021 at 11:11

answered Jun 24, 2021 at 10:45

tao

91.1k18 gold badges138 silver badges174 bronze badges

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

5 Comments

Andreas Hunter Over a year ago

I must use like this code inside created hook? window.addEventListener("load", () => { this.isLoadind = false}); or where I must set loading false correctly in my code? @tao

Andreas Hunter Over a year ago

I must show image when loop is finsih. While not finish must be shown loading text

tao Over a year ago

You obviously expect the loop (which probably contains some promises) to delay the execution of the code after it when those promises resolve. If you're not showing the contents of the loop, how do you suggest I help you?

Andreas Hunter Over a year ago

In this code, when you click on the "Start Loading" button, the inscription "Loading ..." should appear for a while, after which the image will appear. But there is no “Loading” sign. Why? Can this be fixed? If so, correct it. (It is undesirable to remove Dummy load. Imagine that we are there very intensively processing some file for the user)

tao Over a year ago

Without showing the for loop contents I can't help you more.

summer · Accepted Answer · 2021-06-25 03:19:25Z

You could use events onload and onerror:

<template>
  <div>
    <!-- button -->
    <button v-if="!isLoaded && !isLoading" @click="startLoading">Start Loading</button>
    <!-- during loading -->
    <div v-show="isLoading && !isLoaded">Loading.....</div>
    <!-- image show when loaded -->
    <img 
      :src="imgSrc" 
      v-show="isLoaded" 
      @load="imgLoadedHandler" 
      @error="imgFailedHandler" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgSrc: '',
      isLoading: false,
      isLoaded: false,
    }
  },
  methods: {
    startLoading() {
      this.isLoading = true;
      this.imgSrc = '...';
    },
    // called when image loaded
    imgLoadedHandler() {
      this.isLoaded = true;
      this.isLoading = false;
    },
    // called when image failed to load
    imgFailedHandler() {
      this.isLoaded = true;
      this.isLoading = false;     
    }
  }
}
</script>

Collectives™ on Stack Overflow

Why loading text doesn't show in vue js?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related