[Vuejs]-Autohide an element in Vue.js after 2 seconds

by

0👍

You could add a property in the data object and use v-show directive to determine whether the element should be visible or not.
If the boolean is false the element is hidden, if true the element is visible.

Method Created called synchronously after the instance is created.

 <template>
        <div>
            <h1 v-show="elementVisible" class="hideElement"> HELLO </h1>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    elementVisible: true
                }
            },
    
            created() {
                setTimeout(() => this.elementVisible = false, 2000)
            }
        }
    </script>

0👍

<template>
  <!-- binding style -->
  <div class="loader-wrapper" :style="{visibility: showLoader ? 'visible' : 'hidden' }"

  <!-- or use v-show directive to show | hide element -->
  <div class="loader-wrapper" v-if="showLoader">
    <div class="loader"><div class="loader-inner"></div></div>
  </div>
</template>

<script>
  data() {
    showLoader: true,
  },
  mounted() {
    this.hideLoader()
  },
  methods: {
    hideLoader() {
      // using setTimeout to programmatically hide loader
      setTimeout(() => {
        this.showLoader = false
      }, 2000)
    }
  }
</script>

0👍

You can write the logic to hide the loader in mounted() hook. Vue calls the mounted() hook when your component is added to the DOM.

Working Demo :

new Vue({
  el: '#app',
  data: {
    isLoaderVisible: true,
  },
  mounted() {
    setTimeout(() => {
      this.isLoaderVisible = false
    }, 2000)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="loader-wrapper" v-if="isLoaderVisible">
    <div class="loader">
      <div class="loader-inner">
        Loading...
      </div></div>
  </div>
</div>

Leave a comment