What could be causing the issue of loading text not appearing in Vue.js?

Question

What could be causing the issue of loading text not appearing in Vue.js?

I have the following code snippet in my application:

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

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

When clicking on the "Start Loading" button in this code, the message "Loading..." should briefly display before the image appears. However, there seems to be an issue as the loading message does not appear. Can you identify what's causing this and suggest a fix? It's important to maintain the simulated load for user experience purposes.

javascript vue.js vuejs3

Answer 1

Answer №1

If you need the code to pause and wait for a loop to finish, consider making startLoading an async function so that you can use await within it. Make sure to use await on any promises your loop is waiting for. Here's a simple example:

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

    for (let i = 1; i < 1E9; ++i) {
      const a = await // insert your promise here;
      // perform actions 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';
  }
}

For more information and examples, check out the documentation here.

Answer 2

If you need the code to pause and wait for a loop to finish, consider making startLoading an async function so that you can use await within it. Make sure to use await on any promises your loop is waiting for. Here's a simple example:

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

    for (let i = 1; i < 1E9; ++i) {
      const a = await // insert your promise here;
      // perform actions 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';
  }
}

For more information and examples, check out the documentation here.

Answer 3

Answer №2

To implement the functionality, you can utilize the events onload and onerror:

<template>
  <div>
    <!-- button -->
   <button v-if="!isLoaded && !isLoading" @click="startLoading">Begin Loading</button>
    <!-- while loading -->
    <div v-show="isLoading && !isLoaded"&g;t;Loading......</div>
    <!-- display image 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 = '...';
    },
    // executed after image loads
    imgLoadedHandler() {
      this.isLoaded = true;
      this.isLoading = false;
    },
    // executed if image fails to load
    imgFailedHandler() {
      this.isLoaded = true;
      this.isLoading = false;     
    }
  }
}
</script>

Answer 4

To implement the functionality, you can utilize the events onload and onerror:

<template>
  <div>
    <!-- button -->
   <button v-if="!isLoaded && !isLoading" @click="startLoading">Begin Loading</button>
    <!-- while loading -->
    <div v-show="isLoading && !isLoaded"&g;t;Loading......</div>
    <!-- display image 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 = '...';
    },
    // executed after image loads
    imgLoadedHandler() {
      this.isLoaded = true;
      this.isLoading = false;
    },
    // executed if image fails to load
    imgFailedHandler() {
      this.isLoaded = true;
      this.isLoading = false;     
    }
  }
}
</script>

What could be causing the issue of loading text not appearing in Vue.js?

Answer №1

Answer №2

Similar questions

Removing a row from a table seamlessly without the need to reload the page

Reinitializing the database with Cypress (postgresql)

The sign-up button mysteriously vanishes after the page is refreshed

How can JavaScript be integrated with Django static URLs?

Is there a way to enable my progressBar to be draggable so that when clicked, it adjusts to a new currentTime position

Having trouble resolving this technical problem in Express.js and JavaScript programming

How can we determine if a Node.js application will remain operational?

Encountered difficulties logging in with MongoDB and Node.js

Guide on incorporating parent properties into nested routes?

What is the best way to properly pass parameters?

Tips for accessing the selected button in notification.confirm() within a PhoneGap app

Triggering event within the componentDidUpdate lifecycle method

Omit the readme.md file from Vuepress

Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Retrieve information using PHP with AJAX without revealing it on the screen

Passport Node: Issue with Password Comparison results in an undefined function error, causing return done(null, user) to fail

"The issue with ExpressJS deleteRoute is that it is not properly refreshing user

What is the method for retrieving the fixed information?

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform