如果我转储 auth_user,我会有一个像这样的模块数组 [{id:1, name:'item-employee'},{id:2, name:'item-manager'}]
我想检查 auth_user 模块是否专门包含 item-employee,如果是,我想显示一个有限的元素。否则,我想展示更多选项。
我正在尝试此操作,但它仍然显示所有 3 个导航项,即使我的用户对象具有应限制它的模块。
我在这里做错了什么?
<ul v-if="auth_user.modules.includes(item-employee)" class="nav nav-tabs nav-fill" role="tablist" id="Item-tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#dailyList" role="tab" aria-controls="dailyList" aria-selected="true">Daily Item List</a>
</li>
</ul>
<ul v-else class="nav nav-tabs nav-fill" role="tablist" id="Item-tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#dailyList" role="tab" aria-controls="dailyList" aria-selected="true">Daily Item List</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#calendarView" role="tab" aria-controls="calendarView" aria-selected="false">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#userView" role="tab" aria-controls="userView" aria-selected="false">Users</a>
</li>
</ul>
最佳答案
恐怕这条线无法计算出正确的(期望的)值。
.includes(item-employee)
我会对计算
属性进行过滤。像这样的东西:
export default {
data() {
return {
auth_user: {
modules: [
// ...
]
}
}
},
computed: {
modules() {
return this.auth_user.modules.filter(this.moduleFilter);
}
},
methods: {
moduleFilter(item) {
if (item.name === 'item-employee') {
return false
}
else if (your_other_filter) {
// ...
}
return true;
}
}
}
编辑
如果您只需要在模板中内联过滤它们,
methods: {
checkModule(auth_user) {
return auth_user.modules.some(item => item.name === 'item-employee');
}
}
在模板中,
<ul v-if="checkModule(auth_user)" class="nav nav-tabs nav-fill" role="tablist" id="Item-tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#dailyList" role="tab" aria-controls="dailyList" aria-selected="true">Daily Item List</a>
</li>
</ul>
<ul v-else ...
关于javascript - 根据数组值显示 UL 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59384532/