Show a Component only once and never again VUEJS (current session)

Question

Code is in: VueJS

Hi,

I'm curious how to show a component once and then never again. I've tried v-if and v-model but none of them seem to work. This is my code:

<template  >

    <div id="fakeLoader" v-if="show"></div>
</template>

<script>
import $ from 'jquery'
import '../../bower_components/fakeLoader/fakeLoader.min'

export default {
  name: 'Fakeloader',
  data() {
    return {
      show: true
    };
  },
  methods: {
    showLoader() {
      this.show = false;
    }
  },
  mounted () {
    $(document).ready(function () {
      // Init Fakeloader
      $('#fakeLoader').fakeLoader({
        timeToHide: 800,
        spinner: 'spinner5',
        bgColor: '#274156'
      }
    );
    });
    this.showLoader();
  }
}
</script>

<style>
  @import '../../bower_components/fakeLoader/fakeLoader.css';

  #fakeLoader {
    z-index: 999999 !important;
  }
</style>

I'm setting a boolean called show and make it false whenever the jQuery function is called and make it permanently false so this component will not show again FOR THE CURRENT SESSION. So if the user opens another tab, the fakeloader should appear again at the beginning.

Answer 1

You might want to look into v-cloak . It allows you to segment areas of your site based on whether vue is loaded or not.

For your example, I'd have a CSS sheet comprised of

#app[v-cloak] {
    display: none
}

#fakeloader {
    display: none
}

#fakeloader[v-cloak] {
    display: block
}

Then

<div id="app">
  <div id="fakeloader" v-cloak>
    This is my loader
  </div>
  <div id="content" v-cloak>
    This is my page
  </div>
</div>

This will let your app have preference when vue is loaded and the loader having preference when vue is loading.

EDIT: Just to show why a fiddle is a good thing to have before you answer. I have a fiddle up here which should demonstrate and I fixed the code.