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

Question

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

Select 盒子:

  <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"
        }
    ]
}

我希望 select 框显示团队成员的用户名 (_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" />

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

Populating Vue.js Select Box with Nested JSON Array

javascript

json

vue.js

vuetify.js