使用vue-resource進行數(shù)據(jù)交互的實例

更新時間：2017年09月02日 09:32:54 作者：邏輯左移喔

下面小編就為大家?guī)硪黄褂胿ue-resource進行數(shù)據(jù)交互的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一.使用vue-resource插件進行數(shù)據(jù)交互式，返回的并不是直接的json數(shù)據(jù)，其實還封裝了一層。

如下代碼：直接使用 res.result.list 取不到數(shù)據(jù)。

methods:{
  cartview:function(){
   var _this = this;
   this.$http.get("data/cartData.json").then(function(res){
    _this.productList = res.result.list;
    _this.totalMoney = res.result.totalMaoney;
   });
  }
 }

錯誤信息如下：

這時進行斷點調(diào)試：

F12 打開chrome瀏覽器控制臺——ctrl+p ——查找相應(yīng)的代碼文件（car.js 即上面那段代碼所在的文件。）——在19行打斷點——刷新——鼠標移到res，可以看到整個封裝好的結(jié)構(gòu)，這里我們看到result實際上是在data里面。

所以正確獲取數(shù)據(jù)的代碼如下：

methods:{
  cartview:function(){
   var _this = this;
   this.$http.get("data/cartData.json").then(function(res){
    _this.productList = res.data.result.list;
    _this.totalMoney = res.data.result.totalMaoney;
   });
  }
 }

json文件結(jié)構(gòu)如如下

{
 "status":1,
 "result":{
 "totalMoney":109,
 "list":[
  {
  "productId":"600100002115",
  "productName":"黃鶴樓香煙",
  "productPrice":19,
  "productQuantity":1,
  "productImage":"img/goods-1.jpg",
  "parts":[
   {
   "partsId":"10001",
   "partsName":"打火機",
   "imgSrc":"img/part-1.jpg"
   },
   {
   "partsId":"10002",
   "partsName":"打火機",
   "imgSrc":"img/part-1.jpg"
   }
  ]
  },
  {
  "productId":"600100002120",
  "productName":"加多寶",
  "productPrice":8,
  "productQuantity":5,
  "productImage":"img/goods-2.jpg",
  "parts":[
   {
   "partsId":"20001",
   "partsName":"吸管",
   "imgSrc":"img/part-2.jpg"
   }
  ]
  },
  {
  "productId":"600100002117",
  "productName":"金裝黃鶴樓",
  "productPrice":25,
  "productQuantity":2,
  "productImage":"img/goods-1.jpg",
  "parts":[
   {
   "partsId":"10001",
   "partsName":"打火機-1",
   "imgSrc":"img/part-1.jpg"
   },
   {
   "partsId":"10002",
   "partsName":"打火機-2",
   "imgSrc":"img/part-1.jpg"
   }
  ]
  }
 ]
 },
 "message":""

以上這篇使用vue-resource進行數(shù)據(jù)交互的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

結(jié)合el-upload組件實現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個新需求，要求在el-upload組件基礎(chǔ)上實現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個功能怎么實現(xiàn)呢?一起看看吧
2022-09-09
vue3中項目優(yōu)化方法詳解(Web?Worker的使用)
最近在做vue3的項目中,遇到了計算量龐大導(dǎo)致頁面響應(yīng)緩慢的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項目優(yōu)化方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-07-07
vue 監(jiān)聽 Treeselect 選擇項的改變操作
這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue-editor-bridge報錯的解決方案
這篇文章主要介紹了vue-editor-bridge報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue引用Swiper4插件無法重寫分頁器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue的指令和插值總結(jié)(非常詳細)
這篇文章主要給大家介紹了關(guān)于vue指令和插值的相關(guān)資料,大家應(yīng)該對指令和插值都不陌生,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
關(guān)于vue里頁面的緩存詳解
今天小編就為大家分享一篇關(guān)于vue里頁面的緩存詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
面試官問你Vue2的響應(yīng)式原理該如何回答?
可能很多小伙伴之前都了解過?Vue2實現(xiàn)響應(yīng)式的核心是利用了ES5的Object.defineProperty?但是面對面試官時如果只知道一些模糊的概念。只有深入底層了解響應(yīng)式的原理，才能在關(guān)鍵時刻對答如流,本文就來和大家詳細聊聊，感興趣的可以收藏一下
2022-12-12
vue.js管理后臺table組件封裝的方法
table作為數(shù)據(jù)展示組件,在日常開發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺table組件封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-08-08
使用Vue簡單實現(xiàn)一個上拉加載更多分頁組件
上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實現(xiàn)過嗎,本文我們來簡單實現(xiàn)一個上拉加載更多分頁組件吧
2024-11-11