[Vue warn]: Property or method "isActive" is not defined on the instance but referenced during render.

[biigpongsatorn]

[Vue warn]: Property or method "isActive" is not defined on the instance but referenced during render.

[robertnicjoo]

Thanks.

Ps: i just saw first question of yours I'll answer it now,

I need loading on pages without request because if you put url directly axious doesn't have any caches so it take time to page be loaded even static pages so i needed loading for that matter.

[biigpongsatorn]

@robertnicjoo

You must declare reactive data (isActive) like this.

<template>
	<div>
		<vue-element-loading :active="isActive" :is-full-screen="true"/>
                 <a @click="isActive = true"> Start Loading </a>
	</div>
</template>


<script>
import VueElementLoading from 'vue-element-loading';
    export default {
    	data() {
            return {
                isActive: false,
                app_name: process.env.MIX_APP_NAME,
            }
        },
        components: {
            VueElementLoading
        }
    }
</script>

You can see detail in this link.

And you can select type of spinner with attribute spinner

<vue-element-loading :active="isActive" :is-full-screen="true" spinner="bar-fade-scale"/>

See more spinner type in #Spinner

[robertnicjoo]

Thank you, I'll try that and will close this issue if it works <3.

[robertnicjoo]

@biigpongsatorn hi man,
I've tried your code (without button cause in real app i don't apply button for loading spinner)

in case of isActive: false, it won't load, in case of isActive: true; and isActive: ''; it will not disappear after page is loaded.

what should I do now?

[biigpongsatorn]

@robertnicjoo

You should change data of isActive when you want to show loading you should set this.isActive = true and when your progress success you want to hide loading you should set this.isActive = false

Example

<template>
	<div>
		<vue-element-loading :active="isActive" :is-full-screen="true"/>
	</div>
</template>


<script>
import VueElementLoading from 'vue-element-loading';
    export default {
    	data() {
            return {
                isActive: false,
                app_name: process.env.MIX_APP_NAME,
            }
        },
        methods: {
          getSomeData () {
          	this.isActive = true
            // Your code...
            this.isActive = false
          }
        },
        components: {
            VueElementLoading
        }
    }
</script>

[robertnicjoo]

@biigpongsatorn the thing is my page is all about static data and nothing dynamic (there is no methods) is just bunch of html codes as my mainpage or login page for instance is just a form and method will work after user is sending request, so basically i need to render this when page loads and not when axios retrieving data.

[biigpongsatorn]

@robertnicjoo Can you show your code ?

[robertnicjoo]

@biigpongsatorn here you go:

<template>
	<div>
		<vue-element-loading :active="isActive" :is-full-screen="true" spinner="bar-fade-scale"/>
		<navbar></navbar>

		<div class="jumbotron jumbotron-fluid text-center">
		  <div class="container">
		    <h1 class="display-4 mmb-5">Welcome to App</h1>
		    <form>
			  <div class="form-row justify-content-center align-items-center mmt-5">
			    <div class="col-md-4">
			      <label class="sr-only" for="inlineFormInput">Query</label>
			      <input type="text" class="customformdes form-control mb-2" id="inlineFormInput" placeholder="E.g. Larave, Vue, Design, Writer">
			    </div>
			    <div class="col-md-4">
			      <label class="sr-only" for="inlineFormInputGroup">Area</label>
			      <input type="text" class="customformdes form-control mb-2" id="inlineFormInputGroup" placeholder="E.g. Jabodetabek, Medan, Surabaya">
			    </div>
			    <div class="col-md-2">
			      <button type="button" class="customformdes btn btn-block btn-primary mb-2">Search</button>
			    </div>
			  </div>
			</form>
		  </div>
		</div>
	
	    <div class="container-fluid counters">
	        <div class="row text-center">
	        	<div class="col-md-3">
	        		<p>Projects</p>
	        		 <div class="iCountUp">
					    <ICountUp
					      :startVal="first.startVal"
					      :endVal="first.endVal"
					      :decimals="first.decimals"
					      :duration="first.duration"
					      :options="first.options"
					      @ready="onFirst"
					    />
					 </div>
	        	</div>
	        	<div class="col-md-3">
	        		<p>Users</p>
	        		<div class="iCountUp">
					    <ICountUp
					      :startVal="sec.startVal"
					      :endVal="sec.endVal"
					      :decimals="sec.decimals"
					      :duration="sec.duration"
					      :options="sec.options"
					      @ready="onSec"
					    />
					 </div>
	        	</div>
	        	<div class="col-md-3">
	        		<p>Projects proceed</p>
	        		<div class="iCountUp">
					    <ICountUp
					      :startVal="third.startVal"
					      :endVal="third.endVal"
					      :decimals="third.decimals"
					      :duration="third.duration"
					      :options="third.options"
					      @ready="onThird"
					    />
					 </div>
	        	</div>
	        	<div class="col-md-3">
	        		<p>Daily paid</p>
	        		<div class="iCountUp">
					    <ICountUp
					      :startVal="fourth.startVal"
					      :endVal="fourth.endVal"
					      :decimals="fourth.decimals"
					      :duration="fourth.duration"
					      :options="fourth.options"
					      @ready="onFourth"
					    />
					 </div>
	        	</div>
	        </div>
		</div>

		<footerss></footerss>
	</div>
</template>

<script>
	import navbar from './navbar.vue';
	import footerss from './footer.vue';
	import ICountUp from 'vue-countup-v2';
	import VueElementLoading from 'vue-element-loading';
	export default {
		data() {
	      return {
	      	isActive: false,
	      	first: {
	      		startVal: 0,
		        endVal: 120500,
		        decimals: 0,
		        duration: 2,
		        options: {
		          useEasing: true,
		          useGrouping: true,
		          separator: ',',
		          decimal: '.',
		          prefix: '',
		          suffix: ''
		        }
	      	},
	      	sec: {
	      	 	startVal: 0,
		        endVal: 5000,
		        decimals: 0,
		        duration: 2,
		        options: {
		          useEasing: true,
		          useGrouping: true,
		          separator: ',',
		          decimal: '.',
		          prefix: '',
		          suffix: ''
		        }
	      	},
	      	third: {
	      	 	startVal: 0,
		        endVal: 58000,
		        decimals: 0,
		        duration: 2,
		        options: {
		          useEasing: true,
		          useGrouping: true,
		          separator: ',',
		          decimal: '.',
		          prefix: '',
		          suffix: ''
		        }
	      	},
	      	fourth: {
	      	 	startVal: 0,
		        endVal: 135000000,
		        decimals: 0,
		        duration: 2,
		        options: {
		          useEasing: true,
		          useGrouping: true,
		          separator: ',',
		          decimal: '.',
		          prefix: 'Rp. ',
		          suffix: ''
		        }
	      	}
	      };
	    },
		components: {
            navbar,
            footerss,
      		ICountUp,
      		VueElementLoading
        },
//my methods are basically static numbers (counter) nothing comes from server
        methods: {
	      onFirst: function(instance, CountUp) {
	        const that = this.first;
	        instance.update(that.endVal);
	      },
	      onSec: function(instance, CountUp){
	      	const that = this.sec;
	        instance.update(that.endVal);
	      },
	      onThird: function(instance, CountUp){
	      	const that = this.third;
	        instance.update(that.endVal);
	      },
	      onFourth: function(instance, CountUp){
	      	const that = this.fourth;
	        instance.update(that.endVal);
	      }
	    }
	}
</script>

[biigpongsatorn]

@robertnicjoo Actualy you can set default isActive = true and when element rendered you change value of isActive = false like this. But maybe loading will show and hide very fast. So if you want to show loading longer time you can use setTimeout for delay time.

<template>
	<div>
		<vue-element-loading :active="isActive" :is-full-screen="true"/>
	</div>
</template>


<script>
import VueElementLoading from 'vue-element-loading';
    export default {
    	data() {
            return {
                isActive: true,
                app_name: process.env.MIX_APP_NAME,
            }
        },
       mounted () {
            this.isActive = false
       },
        components: {
            VueElementLoading
        }
    }
</script>

[robertnicjoo]

@biigpongsatorn unfortunately that doesn't work.

[biigpongsatorn]

@robertnicjoo I think maybe this plugin can help you.

https://github.com/hilongjw/vue-lazyload