Vue.js中基于人员数组过滤角色对象内关联角色的实现方法

现有代码问题 #

1. roles是对象类型，无法直接调用数组专属的filter方法，需要先转换为数组
2. 原有过滤逻辑没有和当前遍历的人员ID绑定，且判断逻辑写反，应该校验角色关联的人员ID列表是否包含当前人员ID
3. 原有计算属性无法接收参数做动态过滤，需要改为可传参的方法

调整代码 #

JS逻辑部分 #

新增一个按人员ID过滤角色的方法：

methods: {
  getRolesByPersonId(personId) {
    // 先把roles对象的属性值提取为数组，再过滤出关联了当前人员的角色
    return Object.values(this.roles).filter(role => role.persons.includes(personId))
  }
}

注意：你原数据里admin角色的status字段为空值，需要补充合法值或者删除该字段，否则会触发语法报错

模板渲染部分 #

修改角色遍历逻辑，调用上述方法传入当前人员ID获取对应角色列表：

<div v-for="person in persons" :key="person.id">
  <div>{{ person.name }}</div>
  <div v-for="role in getRolesByPersonId(person.id)" :key="role.id" style="padding-left: 24px;">
    - {{ role.title }}
  </div>
</div>

调整后即可实现你需要的渲染效果。

内容的提问来源于stack exchange，提问作者Sergey Webster