vue 如何取数组的某个值,vue提取json中,某一个元素的值,并且用value组成一个数组...

2023-05-16

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

readonly

clickable

name="areaCode"

:value="value"

label="区域编码"

placeholder="点击选择区域编码"

@click="areaCode = true"

/>

show-toolbar

:columns="columns"

@confirm="onConfirm"

@cancel="areaCode = false"

/>

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 如何取数组的某个值,vue提取json中,某一个元素的值,并且用value组成一个数组... 的相关文章

  • ajax提交 的编码小结

    今天用ajax的post方法提交数据给webservice 由于有email的缘故发现 注册方法调用总是报错 打开报文一看提交的 发现 64 符号被变成了 40 abc 64 126 com 即abc 40126 com 开始我还以为他没有
  • [JavaScript]Cookie详解(转)

    cookie概述 假如利用一个不变的框架来存储购物栏数据 xff0c 而商品显示页面是不断变化的 xff0c 尽管这样能达到一个模拟全局变量的功能 xff0c 但并不严谨 例如在导航框架页面内右击 xff0c 单击快捷菜单中的 刷新 命令
  • 面试组合技-月色血风暴,什么是Spring中的循环依赖?怎么解决循环依赖?

    x1f484 x1f484 x1f484 今年的铜三铁四到了 xff0c 给大家写几篇面试题解析 文章目录 x1f460 什么是Spring中的循环依赖 xff1f x1f462 Spring怎么解决循环依赖 xff1f x1f455 流程
  • matlab练习程序(矩阵生成有向网络图)

    早知道有向图和无向图差别没有想象中的大我就写到一起了 函数中使用的arrow画箭头函数是在这个网站下的 函数名netplot 使用方法输入请help netplot 无返回值 函数只能处理有向图 作者 xff1a tiandsp 最后修改
  • 字符串处理memchr和memrchr

    memchr extern void memchr const void buf int ch size t count 功能 xff1a 从buf所指内存区域的前count个字节查找字符ch 说明 xff1a 当第一次遇到字符ch时停止查
  • 计算多轴飞行器最大悬停时间

    以结果为导向 xff1a 先看下面截图 为了方便看清楚 xff0c 下面截图承接上面截图的 悬停时间公式 xff1a 电池容量 每个电机总电流之和 61 悬停时间 以上面第一个为例 电池容量为22000maH 每个电机总电流之和是什么意思呢
  • linux应用之make命令详解

    从源代码安装过软件的朋友一定对 configure amp amp make amp amp make install 安装三步曲非常熟悉了 然而究竟这个过程中的每一步幕后都发生了些什么呢 xff1f 今天小编将带你一探究竟 深入理解这个过
  • github 之 下载历史版本

    1 打开github中要下载的项目 2 点击commits 点击上图中标记的地方 xff0c 进入下图所示 xff1a 3 选择列表中的某个版本 4 Browse Files 5 下载 点击上图中的 Download ZIP 下载 转载于
  • Linux环境C程序设计(第2版)

    2019独角兽企业重金招聘Python工程师标准 gt gt gt Linux 环境 C 程序设计 xff08 第 2 版 xff09 共分 6 篇 第 1 篇 介绍了 Linux 系统的安装及 LinuxC 开发环境的搭建等 xff1b
  • 如何准备校招技术面试

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 如何准备校招技术面试 标签 xff1a 面试 TOC 2017 年互联网校招已近尾声 xff0c 作为一个非 CS 专业的应届生 xff0c 零 ACM 经验 零期刊论文发
  • vscode添加prettier格式化自动加分号问题

    在vscode的settings json中添加 xff1a 34 prettier singleQuote 34 true 34 prettier semi 34 false 不管别人有没有用 xff0c lz没用 切实有效 xff1a
  • 一个蚂蚁前端曾经的辛酸面试历程 | 掘金技术征文

    正好处在秋招 xff0c 我也来分享我自学校到现在的一些面试经历 本文就不分享具体的面试题了 xff0c 主要讲我这几年的面试经历 xff0c 以及我个人觉得可以从中吸取的经验教训 xff0c 希望能给在上大学以及毕业3年以内的同学提供一点
  • Nodejs 使用log4js日志

    一 创建log4 js文件 xff0c 保存日志到log文件 xff0c 并在控制台输出 xff0c 如果不控制台输出 xff0c 把删除红色的代码 const log4js 61 require 39 log4js 39 path 61
  • 【Spring Cloud Alibaba】Nacos config的使用和高阶用法

    文章目录 x1f40d 第一步 xff0c 创建配置文件到nacos中 x1f40d 第二步 xff0c 在项目中配置nacos的地址和指定文件 x1f40d 第三步 xff0c 读取配置文件 x1f426 高阶用法 x1f426 高阶用法
  • WEBPACK + JSP 构建多页应用

    概述 传统的JSP页面应用无法有效的使用ES6语法特性 xff0c 项目打包压缩困难 xff0c 无法热更新 传统的单页应用在Tomcat等容器下无法进行服务端渲染到达SEO的效果 本项目工程很好融合的传统JSP页面服务端渲染的特点和单页应
  • 0-c语言入门这一篇就够了-学习笔记(一万字)

    内容来自慕课网 xff0c 个人学习笔记 加上了mtianyan标签标记知识点 C语言入门 gt Linux C语言编程基本原理与实践 gt Linux C语言指针与内存 gt Linux C语言结构体 mark https www imo
  • c语言编程求两个整数的最大公约数(两种方法)

    第一种 xff08 for循环 xff09 include lt stdio h gt include lt stdlib h gt int main int i min k a b printf 34 请输入两个整数 n 34 scanf
  • 手机内存LPDDR4X、LPDDR4、LPDDR3的区别 ICMAX告诉你

    现在的智能手机基本人手一部了 xff0c 手机与生活的参与度越来越紧密 xff0c 像学习工作 商务娱乐 支付等 xff0c 基本都能在手机端实现 现在我们买手机时也会更加关注这个手机处理器是什么 xff1f 运行速度快不快这类问题 xff
  • kali安装火狐浏览器

    第一步 xff1a apt get remove iceweasel 第二步 xff1a echo e 34 ndeb http downloads sourceforge net project ubuntuzilla mozilla a
  • 【Kubernetes】The connection to the server <master>:6443 was refused - did you specify the right host ...

    不知道怎么用着用着 xff0c 使用kubectl 时报错 xff0c 错误如下 xff1a root 64 R740 2 2 kubectl get pod The connection to the server 107 105 136

随机推荐

  • 自己动手不求人 - 手工Ghost安装xp、win7系统教程

    由于初级阶段的基本国情 xff0c 很多朋友第一次安装系统大多是用的ghost光盘 xff0c 设置好启动项 xff0c 放进光驱 xff0c 重启后选择安装XX到C盘 xff0c 整个系统就完成了 xff0c 方便快捷 在U盘启动越来越流
  • Security Definitions

    PeopleSoft security is designed around three definition types Permission Lists A set of access rights to application obj
  • 【转】成为Java顶尖程序员 ,看这10本书就够了

    学习的最好途径就是看书 xff0c 这是我自己学习并且小有了一定的积累之后的第一体会 个人认为看书有两点好处 xff1a 1 能出版出来的书一定是经过反复的思考 雕琢和审核的 xff0c 因此从专业性的角度来说 xff0c 一本好书的价值远
  • 【设计模式】我终于读懂了访问者模式。。。

    x1f330 测评系统的需求 将观众分为男人和女人 xff0c 对歌手进行测评 xff0c 当看完某个歌手表演后 xff0c 得到他们对该歌手不同的评价 评价 有不同的种类 xff0c 比如 成功 失败 等 传统方案 x1f331 传统方式
  • MVVM(微软的WPF基础)-MVC(常用模型/设计)-WPF(微软.NETFramework3.0

    为什么80 的码农都做不了架构师 xff1f gt gt gt 最近看 好多人说IOS MVC 过时了 要用MVVM 什么什么的 xff0c 感觉 很新奇 xff0c 就去搜了一下 xff0c 发现原来所谓的MVVM就是 之前微软在10年左
  • prometheus mysql_prometheus监控多个MySQL实例

    之前文章介绍了prometheus grafana exporter的安装以及基本使用 xff0c 在添加mysql监控节点的部分 xff0c 使用了分离部署 43 环境变量的方式 xff0c 如下所示 xff1a 添加MySQL监控 添加
  • NSIS:使用nsWindows.nsh头文件调整窗体大小

    原文 NSIS xff1a 使用nsWindows nsh头文件调整窗体大小 此方法只能简单实现调整窗体大小 xff0c 但不完美 xff0c 调整后窗体上其他的控件都需要调整大小或位置 xff0c 比较麻烦 xff0c 轻狂不建议使用呵
  • iOS 强大第三方资源库

    Github用法 git recipesGit recipes in Chinese 高质量的Git中文教程 lark怎样在Github上面贡献代码 my git有关 git 的学习资料 gitignore非常赞 有用的 gitignore
  • SpringBoot文件上传异常之提示The temporary upload location xxx is not valid

    原文 一灰灰Blog之Spring系列教程文件上传异常原理分析 SpringBoot搭建的应用 xff0c 一直工作得好好的 xff0c 突然发现上传文件失败 xff0c 提示org springframework web multipar
  • 彻底搞懂Object和Function的关系

    Object和Function的关系其实属于原型链的知识范畴 xff0c 如果对于原型链 原型继承还不熟悉的话 xff0c 可以戳这边o xffe3 xffe3 o Object Function和其它对象的关系可以归纳为下面四点 xff1
  • 前后端分离中的无痛刷新token机制

    今天我们来说一说前后端分离中的无痛刷新token机制 xff0c 在手机app中应该经常用到 xff0c 大家都知道在前后端是以token的形式交互 xff0c 既然是token xff0c 那么肯定有它的过期时间 xff0c 没有一个to
  • 理解并配置:IPv6的静态路由与默认路由

    不论是IPv4或者是IPv6的网络环境都完整的支持静态路由 xff0c 静态路由是指由网络管理员手工配置的路由信息 当网络的拓扑结构或链路的状态发生变化时 xff0c 网络管理员需要手工去修改路由表中相关的静态路由信息 静态路由信息在缺省情
  • SQL删除外键约束

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 使用如下SQL语句查询出表中外键约束名称 xff1a span style color 008080 1 span span style color 0000ff sele
  • Windows域控服务器查询命令

    根据Windows版本不同 xff0c 命令有所不同 查本机用户表 net user 查本机管理员 net localhroup administrators 查域管理用户 net group 34 domain dadmins 34 do
  • 【设计模式】我终于读懂了迭代器模式。。。

    看一个具体的需求 编写程序展示一个学校院系结构 xff1a 需求是这样 要在一个页面中展示出学校的院系组成 xff0c 一个学校有多个学院 xff0c 一个学院有多个系 如图 xff1a 传统的设计方案 类图 传统的方式的问题分析 将学院看
  • stm32f103zet6引脚说明

    stm32f103zet6是一种嵌入式 微控制器的集成电路 xff08 IC xff09 xff0c 是由ST公司开发的STM32F1系列的其中一种 xff0c 芯体尺寸是32位 xff0c 速度是72MHz xff0c 程序存储器容量是2
  • 连接postgres特别消耗cpu资源而引发的PostgreSQL性能优化考虑 .

    由于是开发阶段 xff0c 所以并没有配置postgres的参数 xff0c 都是使用安装时的默认配置 xff0c 以前运行也不见得有什么不正常 xff0c 可是前几天我的cpu资源占用突然升高 查看进程 xff0c 发现有一个postgr
  • Call Component Interface from AE

    Local File amp Source amp fileLog Local string amp strLine amp FilePath amp EmplStatus Local array of string amp Item Lo
  • javaweb各种框架组合案例(六):springboot+spring data jpa(hibernate)+restful

    一 介绍 1 springboot是spring项目的总结 43 整合 当我们搭smm ssh ssjdbc等组合框架时 xff0c 各种配置不胜其烦 xff0c 不仅是配置问题 xff0c 在添加各种依赖时也是让人头疼 xff0c 关键有
  • vue 如何取数组的某个值,vue提取json中,某一个元素的值,并且用value组成一个数组...

    这个是瞎捣鼓出来的 需要是做一个下拉select选择框 xff0c 因为用的是vant xff0c 所以代码是这样的 readonly clickable name 61 34 areaCode 34 value 61 34 value 3