Vue.js使用axios动态获取response里的data数据操作


Posted in Javascript onSeptember 08, 2020

今天开发时,使用axios返回的response中data有多个数据:

Vue.js使用axios动态获取response里的data数据操作

如果是获取cn里的数据的,可以用:

response.data.cn

但是需求是根据选择来获取数据的,会发生变化,最开始的想法是,用一个变量来记录需要获取的key:

假设need是需要获取的某个key

const dkey = this.need;

response.data.dkey

这样发现获取不到数据,这是因为vue.js把dkey当成data里的某一个key了,类似于上面的"cn"。

折腾了很久才突然想起,这个data其实类似一个数组,我们可以像使用数组一样使用它,后面发现的确是可行的

const dkey = this.need;

response.data[dkey]

如果有说得不对或者有更好的方法,希望大家指教。

补充知识:Vue遍历data中某个字段,并累加、算总数,总计(this.list.forEach方法实战)

直接上代码,遍历data中prodAllPrice,并累加、算总数,总计(this.list.forEach方法实战):

//定义          
let sum = 0;
this.list.forEach((item) => {
  //遍历prodAllPrice这个字段,并累加
  sum += item.prodAllPrice;
 });
//返回
this.sum = sum;

以上这篇Vue.js使用axios动态获取response里的data数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
简单的jQuery入门指引
Jul 28 Javascript
Prototype框架详解
Nov 25 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 #Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 #Javascript
详解JavaScript的this指向和绑定
Sep 08 #Javascript
vue点击按钮实现简单页面的切换
Sep 08 #Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 #Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 #Javascript
vue a标签点击实现赋值方式
Sep 07 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
其他功能
2006/10/09 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
Laravel实现表单提交
2017/05/07 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
一年级学生期末评语
2014/04/21 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2015大一新生军训感言
2015/08/01 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python