Vue计算属性返回空数组：按用户角色过滤导航按钮异常

问题概述 #

• 需求：根据用户角色渲染对应导航按钮，按钮数组的permission字段指定可查看的角色ID，通过计算属性navBarOptions结合Vuex存储的用户角色过滤数组。
• 异常现象：未登录时（默认匹配角色ID 4），导航按钮正常显示；登录管理员角色（ID为1）后，控制台显示角色ID已更新为1，但navBarOptions返回空数组。
• 调试信息：日志显示permission数组、角色ID均正确，i.permission.includes(userRole)返回true，但过滤结果仍为空。

相关代码 #

按钮数组定义 #

public items = [
    { text: '首页', icon: 'mdi-home', path: '/', permission: [1, 2, 3, 4] },
    { text: '找比赛', icon: 'mdi-map-search', path: '/findGame', permission: [1, 2, 3, 4] },
    { text: '低级联赛', icon: 'mdi-soccer', path: '/leagues', permission: [1, 2, 3, 4] },
    { text: '添加文章', icon: 'mdi-file-document-plus', path: '/addArticle', permission: [1] },
];

导航渲染代码 #

<v-list-item class="my-3" v-for="(item, i) in navBarOptions" :key="i" :to="item.path">
    <v-list-item-icon>
        <v-icon large v-text="item.icon"></v-icon>
    </v-list-item-icon>
    <v-list-item-content class="py-3">
        <v-list-item-title class="py-1 text-h6 font-weight-bold" v-text="item.text"></v-list-item-title>
    </v-list-item-content>
</v-list-item>

原计算属性代码 #

get navBarOptions() {
    const userRole = user.userData?.role.id_role;
    if (userRole != null) {
        console.log("Im here" + userRole);
        return this.items.filter((i) => i.permission.includes(userRole));
    } else {
        return this.items.filter((i) => i.permission.includes(4));
    }
}

调试用代码 #

if (userRole != null) {
    return (this.items = this.items.filter((i) => {
        i.permission.includes(userRole);
        console.log(i.permission);
        console.log(userRole);
        console.log(i.permission.includes(userRole));
    }));
} else {
    // 未登录逻辑
}

问题根源 #

调试代码里犯了两个致命错误：

1. 箭头函数未返回值：调试时的filter回调用了大括号，但没有显式return过滤条件的结果，导致回调默认返回undefined，filter会把所有项都过滤掉，最终返回空数组。
2. 直接修改原数组this.items：调试时把过滤结果赋值给this.items，导致原始按钮数组被清空。后续即使恢复正确的过滤逻辑，原数组已经是空的，自然返回空结果。

修复方案 #

1. 恢复计算属性的正确逻辑 #

确保filter回调返回过滤条件的结果，同时添加原数组的兜底初始化（避免调试时的修改影响后续运行）：

get navBarOptions() {
    const userRole = user.userData?.role.id_role;
    
    // 兜底：如果原数组被意外清空，重新初始化
    if (!this.items.length) {
        this.items = [
            { text: '首页', icon: 'mdi-home', path: '/', permission: [1, 2, 3, 4] },
            { text: '找比赛', icon: 'mdi-map-search', path: '/findGame', permission: [1, 2, 3, 4] },
            { text: '低级联赛', icon: 'mdi-soccer', path: '/leagues', permission: [1, 2, 3, 4] },
            { text: '添加文章', icon: 'mdi-file-document-plus', path: '/addArticle', permission: [1] },
        ];
    }

    if (userRole != null) {
        console.log("当前角色ID：" + userRole);
        return this.items.filter(item => item.permission.includes(userRole));
    } else {
        return this.items.filter(item => item.permission.includes(4));
    }
}

2. 正确的调试写法 #

调试时不要修改原数组，必须显式返回过滤判断结果：

if (userRole != null) {
    const filteredItems = this.items.filter(item => {
        const hasPermission = item.permission.includes(userRole);
        console.log("权限数组：", item.permission, "当前角色：", userRole, "是否有权限：", hasPermission);
        return hasPermission; // 必须返回判断结果
    });
    console.log("过滤后的结果：", filteredItems);
    return filteredItems;
} else {
    return this.items.filter(item => item.permission.includes(4));
}

内容的提问来源于stack exchange，提问作者Mateusz