[英]Grouping unique objects and their values from an array of objects in VueJs
I have a API REST response as a JSON array and I would like to populate 1 select field in VueJs. 我有一个API REST响应作为JSON数组,我想在VueJs中填充1 select字段。
The response from API looks like this 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"
}
]
The output in vuejs template I wanted was a select dropdown like 我想要的vuejs模板中的输出是一个选择下拉列表,例如
<block>-<unitNumber> with id as value
A simple for loop in template solved it for me - 模板中的一个简单的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.