无法在Vue 2＆amp;上设置实例属性Axios API调用

Question

我正在使用Axios库在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时，我可以在视图中输出它，我得到以下内容：

我可以访问代码和国家/地区等密钥，但我无法访问详细信息数组。

现在被困住，想不出现在还能做什么。

我的数据对象如下所示：

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

product: "",
products: "",

country_selected: "",
product_selected: "",

singleProduct: "",
},

Answer 1

您在哪里运行axios请求？我根据你上面的代码嘲笑了一个快速的演示，它似乎对我有用吗？看看 - ＆gt; https://jsfiddle.net/stursby/nz8h6anL/

一些注意事项：

• 我将产品设置为空数组
• 在axios生命周期挂钩
中调用mounted

根据代码的位置，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
    })
  }
})