具有多个条件的数组操作 – Vue.js / JavaScript

Question

在我的 Vue.js 应用程序中，我使用导航抽屉来显示用户有权访问的不同页面。仅当管理员激活相关模块时，页面才可见。moduleID因此，为每个页面和子页面设置了唯一的。该列表由 填充filteredPages[]。该数组是仅显示用户有权访问的页面的结果。所有可用的页面都存储在我的原始数据源中pages[]。

总结一下：仅当这两个条件都成立时才会显示页面：

1. activatedModules[]包含moduleID页面和子页面的 。

2. userPermissions[]包含permissions子级的值（如果没有子级，则包含页面）。

我的代码：

export default {

    data: () => ({

        pages: [

            {

                text: 'Team', moduleID: 'm1',

                children: [

                { text: 'Dashboard', route:'team/dashboard', permissions: 'p101', moduleID: 'm1-1' },

                ],

            },

            {

                text: 'Planner', moduleID: 'm2',

                children: [

                { text: 'Events', route:'/planner/events', permissions: 'p201', moduleID: 'm2-1' },

                { text: 'Calendar', route:'/planner/calendar', permissions: 'p202', moduleID: 'm2-2' },

                ],

            },

            {

                text: 'HR', moduleID: 'm3',

                children: [

                { text: 'Staff', route:'/hr/staff', permissions: 'p301', moduleID: 'm3-1' },

                { text: 'Config', route:'/hr/config', permissions: 'p302', moduleID: 'm3-2' },

                ],

            },

            {

                text: 'Admin', moduleID: 'm4',

                children: [

                { text: 'Users', route:'/admin/users', permissions: 'p401', moduleID: 'm4-1' },

                { text: 'Security', route:'/admin/security', permissions: 'p402', moduleID: 'm4-2' },

                ],

            },

            { text: 'Support', route:'/support', permissions: 'p50', moduleID: 'm5' },

        ],

        activatedModules: ['m1', 'm1-1', 'm3', 'm3-1', 'm3-2' 'm4', 'm4-1', 'm4-2', 'm5'],

        userPermissions: ['p101', 'p301', 'p302', 'p402', 'p50'],

        // This is the source for my navigation drawer:

        filteredPages: []

    }),

Answer 1

这应该可以做到：computed: {&nbsp; filteredPages() {&nbsp; &nbsp; return this.pages.map(page => ({&nbsp; &nbsp; &nbsp; ...page,&nbsp;&nbsp; &nbsp; &nbsp; children: page.children&nbsp; &nbsp; &nbsp; &nbsp; // when children is truthy&nbsp; &nbsp; &nbsp; &nbsp; ? page.children.filter(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // filter out those not in `userPermissions`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child => this.userPermissions.includes(child.permissions)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // and those not in `activatedModules`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && this.activatedModules.includes(child.moduleID)&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; : page.children&nbsp; &nbsp; })).filter(&nbsp; &nbsp; &nbsp; // only keep page if in `activatedModules` and...&nbsp; &nbsp; &nbsp; page => (this.activatedModules.includes(page.moduleID)) &&&nbsp; &nbsp; &nbsp; &nbsp; // if children is truthy and has length or...&nbsp; &nbsp; &nbsp; &nbsp; (page.children?.length || (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // if children is falsy and page.permissions in userPermissions&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; !page.children && this.userPermissions.includes(page.permissions)&nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; );&nbsp; }}看看它的工作原理：Vue.config.devtools = false;Vue.config.productionTip = false;new Vue({&nbsp; el: '#app',&nbsp; data: () => ({&nbsp; &nbsp; pages: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Team',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm1',&nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Dashboard', route:'team/dashboard', permissions: 'p101', moduleID: 'm1-1' }&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Planner',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm2',&nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Events', route:'/planner/events', permissions: 'p201', moduleID: 'm2-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Calendar', route:'/planner/calendar', permissions: 'p202', moduleID: 'm2-2' },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; text: 'HR',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm3',&nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Staff', route:'/hr/staff', permissions: 'p301', moduleID: 'm3-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Config', route:'/hr/config', permissions: 'p302', moduleID: 'm3-2' },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Admin',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm4',&nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Users', route:'/admin/users', permissions: 'p401', moduleID: 'm4-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Security', route:'/admin/security', permissions: 'p402', moduleID: 'm4-2' },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; { text: 'Support', route:'/support', permissions: 'p50', moduleID: 'm5' }&nbsp; &nbsp; ],&nbsp; &nbsp; activatedModules: ['m1', 'm1-1', 'm3', 'm3-1', 'm3-2', 'm4', 'm4-1', 'm4-2', 'm5'],&nbsp; &nbsp; userPermissions: ['p101', 'p301', 'p302', 'p402', 'p50']&nbsp; }),&nbsp; computed: {&nbsp; &nbsp; filteredPages() {&nbsp; &nbsp; &nbsp; return this.pages.map(page => ({&nbsp; &nbsp; &nbsp; &nbsp; ...page,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; children: page.children&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? page.children.filter(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child => this.userPermissions.includes(child.permissions)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && this.activatedModules.includes(child.moduleID)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : page.children&nbsp; &nbsp; &nbsp; })).filter(&nbsp; &nbsp; &nbsp; &nbsp; page => (this.activatedModules.includes(page.moduleID))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && (page.children?.length || (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; !page.children && this.userPermissions.includes(page.permissions)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <pre v-html="filteredPages" /></div>

Answer 2

一些备注：您不应该使用functionfor 回调，就像您开始为 for 所做的那样filter，因为这会让您失去正确的this值。使用箭头函数。filter无法单独完成这项工作，因为您还需要生成可能具有较少子对象的新对象。所以你应该首先map制作那些缩小范围的对象，然后filter。在不使用 Vue 的情况下，您可以运行以下代码片段，该代码片段只是将调用硬编码为filterArray：let app = {&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; filterArray() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.filteredPages = this.pages.map(item => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let children = (item.children || []).filter(child =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.activatedModules.includes(child.moduleID) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.userPermissions.includes(child.permissions)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (children.length || !item.children)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && this.activatedModules.includes(item.moduleID)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && {...item, children};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).filter(Boolean);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; data: () => ({&nbsp; &nbsp; &nbsp; &nbsp; pages: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Team', moduleID: 'm1',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Dashboard', route:'team/dashboard', permissions: 'p101', moduleID: 'm1-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Planner', moduleID: 'm2',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Events', route:'/planner/events', permissions: 'p201', moduleID: 'm2-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Calendar', route:'/planner/calendar', permissions: 'p202', moduleID: 'm2-2' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'HR', moduleID: 'm3',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Staff', route:'/hr/staff', permissions: 'p301', moduleID: 'm3-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Config', route:'/hr/config', permissions: 'p302', moduleID: 'm3-2' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Admin', moduleID: 'm4',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Users', route:'/admin/users', permissions: 'p401', moduleID: 'm4-1' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Security', route:'/admin/security', permissions: 'p402', moduleID: 'm4-2' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Support', route:'/support', permissions: 'p50', moduleID: 'm5' },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; activatedModules: ['m1', 'm1-1', 'm3', 'm3-1', 'm3-2', 'm4', 'm4-1', 'm4-2', 'm5'],&nbsp; &nbsp; &nbsp; &nbsp; userPermissions: ['p101', 'p301', 'p302', 'p402', 'p50'],&nbsp; &nbsp; &nbsp; &nbsp; filteredPages: []&nbsp; &nbsp; }),};// Demo, simulate Vue's call to computed.filterArraylet data = app.data();app.computed.filterArray.call(data);// Verify output:console.log(data.filteredPages);

Answer 3

在下面的代码片段中，我首先使用过滤器来过滤，activatedModules然后使用 aforEach来过滤每个对象children属性userPermissions，我认为你可以在你的 vue 组件中实现它，或者了解如何解决这个问题（希望这有帮助）：const pages = [{&nbsp; &nbsp; text: 'Team',&nbsp; &nbsp; moduleID: 'm1',&nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; text: 'Dashboard',&nbsp; &nbsp; &nbsp; route: 'team/dashboard',&nbsp; &nbsp; &nbsp; permissions: 'p1382',&nbsp; &nbsp; &nbsp; moduleID: 'm1-1'&nbsp; &nbsp; }, ],&nbsp; },&nbsp; {&nbsp; &nbsp; text: 'Planner',&nbsp; &nbsp; moduleID: 'm2',&nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; text: 'Events',&nbsp; &nbsp; &nbsp; &nbsp; route: '/planner/events',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p47289',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm2-1'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Calendar',&nbsp; &nbsp; &nbsp; &nbsp; route: '/planner/calendar',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p283',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm2-2'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; },&nbsp; {&nbsp; &nbsp; text: 'HR',&nbsp; &nbsp; moduleID: 'm3',&nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; text: 'Staff',&nbsp; &nbsp; &nbsp; &nbsp; route: '/hr/staff',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p34729',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm3-1'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Config',&nbsp; &nbsp; &nbsp; &nbsp; route: '/hr/config',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p382',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm3-2'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; },&nbsp; {&nbsp; &nbsp; text: 'Admin',&nbsp; &nbsp; moduleID: 'm4',&nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; text: 'Users',&nbsp; &nbsp; &nbsp; &nbsp; route: '/admin/users',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p3z4',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm4-1'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Security',&nbsp; &nbsp; &nbsp; &nbsp; route: '/admin/security',&nbsp; &nbsp; &nbsp; &nbsp; permissions: 'p2u3',&nbsp; &nbsp; &nbsp; &nbsp; moduleID: 'm4-2'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; },&nbsp; {&nbsp; &nbsp; text: 'Support',&nbsp; &nbsp; route: '/support',&nbsp; &nbsp; permissions: 'p332j',&nbsp; &nbsp; moduleID: 'm5'&nbsp; },];const activatedModules = ['m1', 'm3', 'm4', 'm5'];const userPermissions = ['m1-1', 'm3-1', 'm3-2', 'm4-2'];// This is the source for my navigation drawer:let filteredPages = null;filteredPages = pages.filter(x => activatedModules.includes(x.moduleID));filteredPages.forEach(x => {&nbsp;if (x.children)&nbsp; x.children = x.children.filter(y => userPermissions.includes(y.moduleID));});console.log(filteredPages);