Question

我正在使用Vue核心UI管理员模板。有一个名为_nav.js的文件，该文件基本上导出数组。我保存到vuex.a用户角色数组。角色的一个例子是管理员或仪表板。

在侧边栏菜单中，如果他们具有仪表板用户角色，我只想显示_nav.js文件中的仪表板项目。我尝试过更改_nav.js文件以检查存储，但是在设置userrole之前，侧栏会渲染，而在存储中设置了userrole时，侧栏不会重新渲染。路由是独立的，我只需要了解菜单项的显示即可。

任何人都有过this.vue coreui模板的经验，可以指导我如何实现目标。

Answer 1

在您的v-if标记中放入一个<side-bar>指令，并且只有在加载用户角色后才将其设为true。像这样：

data() {
    return {
        userrole:undefined,
        isLoaded:false
    }
},
mounted(){
    this.fetchUserrole();
}
methods: {
    fetchUserrole(){
        axios.get('url/to/api').then((userrole)=>{
            this.userrole=userrole;
            this.isLoaded=true;
        })
    },
},

，您的HTML如下所示：

<side-bar v-if="isloaded" :userrole="userrole" ></side-bar>

Vue核心UI针对不同用户的不同菜单

1 个答案: