vue提取json中，某一个元素的值，并且用value组成一个数组

2020-11-12 15:31:28 阅读：535 来源： 互联网

标签：10 26 vue 15 areaCode value json 2020 test

这个是瞎捣鼓出来的。需要是做一个下拉select选择框，因为用的是vant，所以代码是这样的

<van-field
            readonly
            clickable
            name="areaCode"
            :value="value"
            label="区域编码"
            placeholder="点击选择区域编码"
            @click="areaCode = true"
            />
            <van-popup v-model="areaCode" position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="areaCode = false"
            />
            </van-popup>
            <van-field
                v-model="equipmentCode"
                name="equipmentCode"
                label="设备编码"
                placeholder="请输入设备编码"
                :rules="[{ required: true, message: '请输入设备编码' }]"
            />

后台返回了一个数据，一开始数据是这样的，我需要先把areaCode的value值提取出来，放到columns组成一个数组

[{"areaCode":"A001","areaName":"海淀区","id":1,"createdBy":"test","createTime":"2020-10-26 15:06:45","modifyBy":"test","modifyTime":"2020-10-26 15:26:34","isRemoved":"N"},{"areaCode":"A002","areaName":"朝阳区","id":2,"createdBy":"test","createTime":"2020-10-26 15:27:41","modifyBy":"test","modifyTime":"2020-10-26 15:27:52","isRemoved":"N"},{"areaCode":"A003","areaName":"通州区","id":4,"createdBy":"test","createTime":"2020-10-26 15:46:22","modifyBy":"test","modifyTime":"2020-10-26 15:46:22","isRemoved":"N"},{"areaCode":"A004","areaName":"昌平区","id":5,"createdBy":"test","createTime":"2020-10-26 15:46:33","modifyBy":"test","modifyTime":"2020-10-26 15:46:33","isRemoved":"N"},{"areaCode":"A005","areaName":"延庆区","id":6,"createdBy":"test","createTime":"2020-10-26 15:46:47","modifyBy":"test","modifyTime":"2020-10-26 15:46:47","isRemoved":"N"}]

我先提取了一下areacode这个属性，变成

rs.result.map(o=>{return{areaCode:o.areaCode}});
//控制台打印出来的json变成
[{"areaCode":"A001"},{"areaCode":"A002"},{"areaCode":"A003"},{"areaCode":"A004"},{"areaCode":"A005"}]

因为不需要areacode这个key'名字，我又提取了一下变成

rs.result.map(o=>{return[o.areaCode]})
//控制台值变成
[["A001"],["A002"],["A003"],["A004"],["A005"]]

但是还是不符合vant下拉框数据格式，又把获取的value值转换了一下才可以

rs.result.map(o=>{return[o.areaCode].toString()});
//控制台json变成
["A001","A002","A003","A004","A005"]
符合要求了

说了这么多，其实最根本的，就那么一行代码，，，就是看需要啥样数据，就用哪个把

标签：10,26,vue,15,areaCode,value,json,2020,test
来源： https://www.cnblogs.com/wuzhaoyu/p/13964194.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue提取json中，某一个元素的值，并且用value组成一个数组