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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
angularJS开发注意事项
May 26 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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
简单易用的计数器(数据库)
2006/10/09 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python-接口开发入门解析
2019/08/01 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Java语言程序设计测试题判断题部分
2013/01/06 面试题
工商治理实习生的自我评价
2014/01/15 职场文书
物业保安员岗位职责
2014/03/14 职场文书
小学教师年度个人总结
2015/02/05 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Pandas数据类型之category的用法
2021/06/28 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python