vue-resource 를 사용 하여 데이터 상호작용 을 하 는 실례

1.vue-resource 플러그 인 을 사용 하여 데이터 인 터 랙 션 을 하고 직접적인 json 데이터 가 아니 라 한 층 더 패키지 되 었 습 니 다.
다음 코드:res.result.list 를 직접 사용 하면 데 이 터 를 찾 을 수 없습니다.

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;
   });
  }
 }

오류 정 보 는 다음 과 같 습 니 다.

이 때 정지점 디 버 깅 을 진행 합 니 다:
F12 chrome 브 라 우 저 콘 솔-ctrl+p-해당 코드 파일 찾기(car.js 즉,위 코드 가 있 는 파일 입 니 다.)19 줄 의 중단 점-새로 고침-마우스 가 res 로 이동 하면 봉 인 된 구 조 를 볼 수 있 습 니 다.여기 서 result 는 실제로 data 안에 있 습 니 다.



그래서 데 이 터 를 정확하게 가 져 오 는 코드 는 다음 과 같 습 니 다.

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 파일 구 조 는 다음 과 같다.

{
 "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 를 사용 하여 데이터 교 류 를 하 는 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.