Vue Core UI другое меню для разных пользователей

Question

Я использую шаблон администратора Vue core UI. Существует файл с именем _nav.js, который в основном экспортирует массив. Я сохраняю в массиве пользователя vuex.a. Примером роли может быть администратор или панель инструментов.

В боковом меню я хочу отображать элемент панели из файла _nav.js только в том случае, если у них есть роль пользователя панели. Я попытался изменить файл _nav.js, чтобы проверить хранилище, но боковая панель отображается до того, как задана роль пользователя, а когда в хранилище задана роль пользователя, боковая панель не перерисовывается. Маршрутизация является отдельной, мне просто нужно знать об отображении пункта меню.

Кто-нибудь получил опыт использования этого шаблона core.vue coreui и мог бы подсказать мне, как достичь моей цели.

Answer 1

Положить v-if директива в вашем <side-bar> и добавьте true только после загрузки userrole. вот так:

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>