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

Question

在我的 Vue.js 应用程序中，我使用导航抽屉来显示用户有权访问的不同页面。仅当管理员激活相关模块时，页面才可见。moduleID因此，为每个页面和子页面设置了唯一的。该列表由 填充filteredPages[]。该数组是仅显示用户有权访问的页面的结果。所有可用的页面都存储在我的原始数据源中pages[]。总结一下：仅当这两个条件都成立时才会显示页面：activatedModules[]包含moduleID页面和子页面的 。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: {

  filteredPages() {

    return this.pages.map(page => ({

      ...page, 

      children: page.children

        // when children is truthy

        ? page.children.filter(

          // filter out those not in `userPermissions`

          child => this.userPermissions.includes(child.permissions)

          // and those not in `activatedModules`

            && this.activatedModules.includes(child.moduleID)

        )

        : page.children

    })).filter(

      // only keep page if in `activatedModules` and...

      page => (this.activatedModules.includes(page.moduleID)) &&

        // if children is truthy and has length or...

        (page.children?.length || (

          // if children is falsy and page.permissions in userPermissions

          !page.children && this.userPermissions.includes(page.permissions)

        ))

    );

  }

}

看看它的工作原理：

Vue.config.devtools = false;

Vue.config.productionTip = false;

new Vue({

  el: '#app',

  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']

  }),

  computed: {

    filteredPages() {

      return this.pages.map(page => ({

        ...page, 

        children: page.children

          ? page.children.filter(

            child => this.userPermissions.includes(child.permissions)

              && this.activatedModules.includes(child.moduleID)

          )

          : page.children

      })).filter(

        page => (this.activatedModules.includes(page.moduleID))

          && (page.children?.length || (

            !page.children && this.userPermissions.includes(page.permissions)

          ))

      );

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <pre v-html="filteredPages" />

</div>

Answer 2

一些备注：

• 您不应该使用functionfor 回调，就像您开始为 for 所做的那样filter，因为这会让您失去正确的this值。使用箭头函数。

• filter无法单独完成这项工作，因为您还需要生成可能具有较少子对象的新对象。所以你应该首先map制作那些缩小范围的对象，然后filter。

在不使用 Vue 的情况下，您可以运行以下代码片段，该代码片段只是将调用硬编码为filterArray：

let app = {

    computed: {

        filterArray() {

            this.filteredPages = this.pages.map(item => {

                let children = (item.children || []).filter(child => 

                    this.activatedModules.includes(child.moduleID) &&

                    this.userPermissions.includes(child.permissions)

                );

                return (children.length || !item.children) 

                    && this.activatedModules.includes(item.moduleID)

                    && {...item, children};

            }).filter(Boolean);

        }

    },

    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'],

        filteredPages: []

    }),

};

// Demo, simulate Vue's call to computed.filterArray

let data = app.data();

app.computed.filterArray.call(data);

// Verify output:

console.log(data.filteredPages);

Answer 3

在下面的代码片段中，我首先使用过滤器来过滤，activatedModules然后使用 aforEach来过滤每个对象children属性userPermissions，我认为你可以在你的 vue 组件中实现它，或者了解如何解决这个问题（希望这有帮助）：

const pages = [{

    text: 'Team',

    moduleID: 'm1',

    children: [{

      text: 'Dashboard',

      route: 'team/dashboard',

      permissions: 'p1382',

      moduleID: 'm1-1'

    }, ],

  },

  {

    text: 'Planner',

    moduleID: 'm2',

    children: [{

        text: 'Events',

        route: '/planner/events',

        permissions: 'p47289',

        moduleID: 'm2-1'

      },

      {

        text: 'Calendar',

        route: '/planner/calendar',

        permissions: 'p283',

        moduleID: 'm2-2'

      },

    ],

  },

  {

    text: 'HR',

    moduleID: 'm3',

    children: [{

        text: 'Staff',

        route: '/hr/staff',

        permissions: 'p34729',

        moduleID: 'm3-1'

      },

      {

        text: 'Config',

        route: '/hr/config',

        permissions: 'p382',

        moduleID: 'm3-2'

      },

    ],

  },

  {

    text: 'Admin',

    moduleID: 'm4',

    children: [{

        text: 'Users',

        route: '/admin/users',

        permissions: 'p3z4',

        moduleID: 'm4-1'

      },

      {

        text: 'Security',

        route: '/admin/security',

        permissions: 'p2u3',

        moduleID: 'm4-2'

      },

    ],

  },

  {

    text: 'Support',

    route: '/support',

    permissions: 'p332j',

    moduleID: 'm5'

  },

];

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 => {

 if (x.children)

  x.children = x.children.filter(y => userPermissions.includes(y.moduleID));

});

console.log(filteredPages);