首頁猿問具有多個條件的數(shù)組操作...

具有多個條件的數(shù)組操作 – Vue.js / JavaScript

JavaScript

森欄 2024-01-18 16:14:47

在我的 Vue.js 應(yīng)用程序中，我使用導(dǎo)航抽屜來顯示用戶有權(quán)訪問的不同頁面。僅當(dāng)管理員激活相關(guān)模塊時，頁面才可見。moduleID因此，為每個頁面和子頁面設(shè)置了唯一的。該列表由填充filteredPages[]。該數(shù)組是僅顯示用戶有權(quán)訪問的頁面的結(jié)果。所有可用的頁面都存儲在我的原始數(shù)據(jù)源中pages[]?？偨Y(jié)一下：僅當(dāng)這兩個條件都成立時才會顯示頁面：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: [] }),

查看完整描述

3 回答

鳳凰求蠱

TA貢獻1825條經(jīng)驗獲得超4個贊

這應(yīng)該可以做到：

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)

))

);

}

})

</div>

反對回復(fù) 2024-01-18

牧羊人nacy

TA貢獻1862條經(jīng)驗獲得超7個贊

一些備注：

您不應(yīng)該使用functionfor 回調(diào)，就像您開始為 for 所做的那樣filter，因為這會讓您失去正確的this值。使用箭頭函數(shù)。
filter無法單獨完成這項工作，因為您還需要生成可能具有較少子對象的新對象。所以你應(yīng)該首先map制作那些縮小范圍的對象，然后filter。

在不使用 Vue 的情況下，您可以運行以下代碼片段，該代碼片段只是將調(diào)用硬編碼為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);

反對回復(fù) 2024-01-18

達令說

TA貢獻1821條經(jīng)驗獲得超6個贊

在下面的代碼片段中，我首先使用過濾器來過濾，activatedModules然后使用 aforEach來過濾每個對象children屬性userPermissions，我認為你可以在你的 vue 組件中實現(xiàn)它，或者了解如何解決這個問題（希望這有幫助）：

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);

反對回復(fù) 2024-01-18

3 回答
0 關(guān)注
199 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

具有多個條件的數(shù)組操作 – Vue.js / JavaScript

具有多個條件的數(shù)組操作 – Vue.js / JavaScript

3 回答

添加回答