javascript - 从 VueJ 中的对象数组中对唯一对象及其值进行分组

Question

我有一个作为 JSON 数组的 API REST 响应，我想在 VueJs 中填充 1 个选择字段。

API 的响应如下所示

    "unitList": [
      {
        "unitNumber": "100",
        "block": "1",
        "id": "9a16843a-7e59-11e9-8215-525400a02af1"
      },
      {
        "unitNumber": "101",
        "block": "1",
        "id": "59903bc0-e795-485f-890f-8c488ba9a6ca"
      },
      {
        "unitNumber": "200",
        "block": "2",
        "id": "46f8b6c2-80fe-11e9-b8c0-525400a02af1"
      },
      {
        "unitNumber": "201",
        "block": "2",
        "id": "2532a3b8-ad20-4878-8075-08832c0d7ec9"
      },
      {
        "unitNumber": "202",
        "block": "2",
        "id": "6e539ab3-8da2-4178-8a8e-9d56814a6b9f"
      },
      {
        "unitNumber": "301",
        "block": "3",
        "id": "8cfdc0d1-b39a-4866-9bdb-bf38e84ad338"
      },
      {
        "unitNumber": "302",
        "block": "3",
        "id": "c2cedc40-3292-4746-84bd-f2e563cf3c0e"
      },
      {
        "unitNumber": "303",
        "block": "3",
        "id": "6b7611f5-49c3-448f-920e-00332443698a"
      }
    ]

我想要的 vuejs 模板中的输出是一个选择下拉菜单，例如

    <block>-<unitNumber> with id as value

标签： javascriptvue.jsvuejs2

Answer 1

模板中的一个简单 for 循环为我解决了它 -

      <select name="block" v-model="block">
        <option
          v-for="blk in unitList"
          :key="blk.id"
          :value="blk.id"
        >{{ blk.block}} - {{ blk.unitNumber }}</option>
      </select>