Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
今天開(kāi)發(fā)時(shí)，使用axios返回的response中data有多個(gè)數(shù)據(jù)：
如果是獲取cn里的數(shù)據(jù)的，可以用：
response.data.cn
但是需求是根據(jù)選擇來(lái)獲取數(shù)據(jù)的，會(huì)發(fā)生變化，最開(kāi)始的想法是，用一個(gè)變量來(lái)記錄需要獲取的key:
假設(shè)need是需要獲取的某個(gè)key
const dkey = this.need;
response.data.dkey
這樣發(fā)現(xiàn)獲取不到數(shù)據(jù)，這是因?yàn)関ue.js把dkey當(dāng)成data里的某一個(gè)key了，類(lèi)似于上面的"cn"。
折騰了很久才突然想起，這個(gè)data其實(shí)類(lèi)似一個(gè)數(shù)組，我們可以像使用數(shù)組一樣使用它，后面發(fā)現(xiàn)的確是可行的
const dkey = this.need;
response.data[dkey]
如果有說(shuō)得不對(duì)或者有更好的方法，希望大家指教。
補(bǔ)充知識(shí)：Vue遍歷data中某個(gè)字段，并累加、算總數(shù)，總計(jì)(this.list.forEach方法實(shí)戰(zhàn))
直接上代碼，遍歷data中prodAllPrice，并累加、算總數(shù)，總計(jì)(this.list.forEach方法實(shí)戰(zhàn))：
//定義
let sum = 0;
this.list.forEach((item) => {
//遍歷prodAllPrice這個(gè)字段，并累加
sum += item.prodAllPrice;
});
//返回
this.sum = sum;
以上這篇Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue組件庫(kù)開(kāi)發(fā)詳析
這篇文章主要給大家介紹了關(guān)于Vue組件庫(kù)開(kāi)發(fā)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Vue常見(jiàn)錯(cuò)誤Error?in?mounted?hook解決辦法
這篇文章主要給大家介紹了關(guān)于Vue常見(jiàn)錯(cuò)誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問(wèn)題,會(huì)發(fā)現(xiàn)跟聲明周期鉤子有關(guān)系,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue通過(guò)獲取url中的信息登錄頁(yè)面的代碼詳解
這篇文章主要給大家介紹了vue通過(guò)獲取url中的信息登錄頁(yè)面的方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能，基于NUXT的validate方法實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue中typescript裝飾器的使用方法超實(shí)用教程
這篇文章主要介紹了vue中使用typescript裝飾器的使用方法超實(shí)用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue?使用postMessage?實(shí)現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應(yīng)用?postMessage?實(shí)現(xiàn)父子跨域通信,通過(guò)示例介紹了postMessage的使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm，以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開(kāi)發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10
Vue.js 單頁(yè)面多路由區(qū)域操作的實(shí)例詳解
這篇文章主要介紹了 Vue.js 單頁(yè)面多路由區(qū)域操作的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
解決keep-alive同一個(gè)組件不緩存問(wèn)題
這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問(wèn)題,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02