Vue 2＆Axios API呼び出しでインスタンスプロパティを設定できません

Question

Axueライブラリを使用してVue 2.0で次のようにAPI呼び出しを行います。

axios.get(API_URL + '/products?country=' + code, {headers: { Authorization: 'Basic c3VyZWJ1ZGR5LWFwaS11c2VyOkFwaTQzMjJTdXJlYg==' }}) 
      .then((response) => { 
       console.log(response); 
       //this.products = response.data; 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 

"this.products = response.data;"私は、私はそれがビューに、私は次の取得出力することができますをthis.productsするサーバの応答を添付したいとき

：：私は完璧な応答そうのように取得コメントアウト

コードや国のようなキーにアクセスできますが、詳細配列にアクセスすることはできません。

今すぐ停止して、今すぐ他に何ができるか考えることはできません。次のように

マイデータオブジェクトが見えます：

あなた axiosリクエストを実行している

data: 
{ 
country: "", 
countries: "", 

product: "", 
products: "", 

country_selected: "", 
product_selected: "", 

singleProduct: "", 
}, 

Answer 1

？私は上記のコードに基づいて簡単なデモを嘲笑して、それは私のために働くようですか？それをチェックアウト - >https://jsfiddle.net/stursby/nz8h6anL/

いくつかの注意事項：

• 私は場所によってmountedライフサイクルフック

でaxiosを呼び出すと、空の配列

に設定製品だあなたコードは、thisのコンテキストがaxiosにバインドされていて、Vueインスタンスにバインドされていない可能性があります。

ここに私のVueの固有のコードです：

// Generated via --> http://beta.json-generator.com/NyhG4qTDf 
const API = 'https://api.myjson.com/bins/tbeuh' 

const app = new Vue({ 
    el: '#app', 
    data: { 
    products: [] 
    }, 
    mounted() { 
    axios.get(API).then((res) => { 
     this.products = res.data 
    }) 
    } 
})