CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
invalid
invalid

Reputation: 1505

How can I use v-if dynamically with Nuxt.js generate?

If I wrote this .vue file, v-if is resolved when I run nuxt generate command.
But I want to use dynamic v-if.
How can I do this? 

<template>
  <div v-if="foo()"></div>
</template>

<script>
export default {
  methods:{
    foo:function(){ 
      /*
      this method return boolean. 
      now, this is called at `nuxt generate
      but I want to run this when user visit page` 
      */ 
    }
  }
}
</script>

Upvotes: 0

Views: 836

Answers (1)

Shadi Farzankia
Shadi Farzankia

Reputation: 737

I think you should use vue lifecycle named 'mounted'. Create a data named for example 'isMounted' and set it to true.

data() {
  return {
    isMounted: true
  }
}

then use it in your html as:

<div v-if="isMounted"></div>

Then change its value in the mounted lifecycle as follows:

mounted(){
 this.isMounted = this.foo();
}

Upvotes: 1

Related Questions