Vue JS：过滤 API答案

【问题标题】：Vue JS: filter on APIVue JS：过滤 API
【发布时间】：2022-01-10 15:06:11
【问题描述】：

在我的代码下面，我已将用户存储在 API JSON 中，我希望只使用 role : Admin 和他们的 username 来获取用户，但它没有用。以下是我的 JSON 正文响应和代码

  "response": [
        {
            "profile_picture": "",
            "verified_by_email": false,
            "_id": "61c3a765c5f55200049de490",
            "username": "user2",
            "email": "user1@yahoo.com",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",
            "createdAt": "2021-12-22T22:32:05.034Z",
            "updatedAt": "2021-12-22T22:32:05.034Z",
            "__v": 0
        },
        {
            "profile_picture": "",
            "verified_by_email": false,
            "_id": "61c325ea02526b000424929f",
            "username": "nina",
            "email": "nin@yahoo.com",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
            "createdAt": "2021-12-22T13:19:38.240Z",
            "updatedAt": "2021-12-22T13:19:38.240Z",
            "__v": 0
        }
    ]
}

computed:{

getAdmin(){

// i stored my API  respone in array Users

this.Users.filter(users => {
          return users.role;
}

}

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您需要从getAdmin 返回并在过滤器中提供比较以测试管理员角色

computed:{
  getAdmin(){
    return this.Users.filter(user =>  user.role === 'Admin')
  }
}

根据修改后的问题编辑：

computed:{
  adminNames(){
    return this.Users.filter(user =>  user.role === 'Admin').map(user =>  user.username)
  }
}

基于cmets再次编辑：

如果您只希望在任何给定时间只有一个管理员用户，您可以这样做：

computed:{
  adminName(){
    const admin = this.Users.find(user => user.role === 'Admin')
    return admin && admin.username

    // or using optional chaining
    // return this.Users.find(user => user.role === 'Admin')?.username
  }
}

【讨论】：

它给了我这样的名字 ["username"] 在一个数组中：\
您说您想要获取角色为管理员的用户（复数），所以是的，它将是一个返回的数组。
是的，但是当我使用它时，我需要将每个用户名分开，这类似于 vue inline html v-for="(admin,index) in adminNames" :key="index" 然后当显示 {{admin}} 它给了每一个 .. 我需要在 js 中而不是在 vue inline html 中
更新@sara97

【解决方案2】：

结合过滤器和地图以获得所需的结果。

var users = 
{
"response": [
        {
            
            "_id": "61c3a765de490",
            "username": "user2",
            "email": "user1@yahoo.com",
            "password": "$2a$10$pMOyjwVf1RkaIeVdNKWdaucVRybsDEEN3fjxLZOctJyL42HqrlRgC",
            "role": "User",
            "phone_number": "12365478",

        },
        {
           
            "_id": "61c325e424929f",
            "username": "nina",
            "email": "nina@yahoo.com",
            "password": "$2a$10$steP5Aq9mcTIA8XLjm9Y5ONoWQUMEWLD7TJPSHzTksqbOTpv9MbD.",
            "role": "Admin",
            "phone_number": "123456",
           
        }
    ]
}

// Get all admins
var admins = users['response'].filter((user) => user.role === 'Admin').map((user) => user.username)

console.log(admins)

【讨论】：

谢谢，但我编辑了我的问题...我想获得角色为 =Admin 的用户名
我进行了编辑:)