今天在改一个项目，有一个<el-tabs>的列表循环，需要根据权限控制列表项的显示，代码如下：
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in accessTabs"
:key="index"
:label="item.label"
:name="item.name">
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: "base",
tabs: [
{
label: "基本设置",
name: "base"
},
{
label: "应用设置",
name: "app"
},
{
label: "标签设置",
name: "tag"
},
{
label: "成员管理",
name: "role"
},
{
label: "高级设置",
name: "advanced"
}
]
}
},
computed: {
accessTabs() {
return this.tabs.filter((item, index) => {
if(this.$userRoleAccess == 1) {
return true
} else {
return index == 2 || index == 3
}
})
}
}
}
</script>
上面代码的逻辑就是，当用户为管理员身份，也就是$userRoleAccess = 1的时候，可以访问全部5个tab；当用户为普通成员身份，也就是$userRoleAccess = 0的时候，只能访问“标签设置”和“成员管理”。
在测试的时候，先访问了一个身份为管理员的项目，一切正常，接着访问了另一个身份为普通成员的项目，结果出现问题了，控制台报错：
[Vue warn]: Duplicate keys detected
将上面的:key="index"改为:key="item.label"，经过测试没有报错。
key值可以接受Number或者String类型，并且应使用唯一索引。
参考：
vue中使用v-for时为什么不能用index作为key？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
