使用v-if或v-show加载页面时出现闪烁

我是使用v-if判断是否加载一个下拉菜单的选项：

<el-menu-item index="2" v-if="this.name=='root'" >

然后在页面加载及页面刷新时，在不符合条件的情况下，这个选项会出现然后消失，就是闪烁的出现一下。

然后我查找的很多办法，比如使用v-cloak，但是都不行。

之后我思考会不会是因为要判断this.name=='root'这个条件的原因，导致先显示后来才消失，于是我新建一个boolean变量，默认为false。

data(){
    return{
        boolean: false,
        name: '',
    };
},

然后把开始的判断改为<el-menu-item index="2" v-if="boolean" >

再写一个函数:

getBoolean（）{

        if（this.name == 'root'）{

                this.boolean=true;

        }else{

                this.boolean=false;

        }

然后在mounted中调用函数（可以去了解一下mounted）

mounted:function(){
    this.getBoolean();
},

这样v-if的判断条件很快就可以得到了，就不会出现闪烁的问题了。