如何在 Nuxt.js generate 中动态使用 v-if？

Question

如果我写了这个 .vue 文件，当我运行nuxt generate命令时，v-if 会被解析。
但我想使用动态 v-if。
我怎样才能做到这一点？

<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>

Answer 1

我认为您应该使用名为“mounted”的 vue 生命周期。 创建一个名为“isMounted”的数据并将其设置为 true。

data() {
  return {
    isMounted: true
  }
}

然后在你的 html 中使用它：

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

然后在挂载的生命周期中更改其值，如下所示：

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