使用嵌套 JSON 数组填充 Vue.js 选择框

Question

我正在尝试在 Vue.js 中实现一个选择框，其中它的值由数组中的数据成员填充，在 JSON 对象中。

选择框：

  <v-select
      :items="JSONResponse"
      v-model="selectedMember"
      label="Select A Team Member"
    ></v-select>

JSON 响应如下所示：

{
    "data": [
        {
            "_team": [
                {
                    "_id": "1",
                    "username": "member_1"
                },
                {
                    "_id": "2",
                    "username": "member_2"
                }
            ],
            "_id": "2222",
            "name": "team_test"
        }
    ]
}

我希望选择框显示团队成员的用户名（_team.username）。我试图编写一个 for 循环来迭代 JSON 对象，但是在尝试深入嵌套数组时遇到了问题。

任何帮助将不胜感激。

Answer 1

一个简单的map function 就可以解决问题：

<v-select
  :items="JSONResponse.data[0]._team.map(member => member.username)"
  v-model="selectedMember"
  label="Select A Team Member" />