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的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
php at(@)符号的用法简介
2009/07/11 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS跨域问题详解
2014/11/25 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Python创建日历实例
2014/08/21 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python简明入门教程
2015/08/04 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
浅析python连接数据库的重要事项
2021/02/22 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
高中运动会入场词
2014/02/14 职场文书
2014政务公开实施方案
2014/02/19 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
邀请函模板
2015/02/02 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫