如何从 VueJS 中的 xhr 调用响应中获取要绑定的变量？答案

【问题标题】：How to get a variable to bind from xhr call response in VueJS?如何从 VueJS 中的 xhr 调用响应中获取要绑定的变量？
【发布时间】：2018-02-17 06:33:16
【问题描述】：

好的，我是 VueJS 的初学者，我只是想进行一个简单的 XHR 调用并将 json 数据响应绑定到我的变量...

我有一个组件 App.vue 和模板的这一部分我想显示 json 的结果。 bpi 是变量名

<div id="simulationPoints">
    <h2 className="logTitle">Full Log:</h2>
    {{ bpi }}
</div>

然后是我的脚本

export default {
  name: 'App',
  data: () => ({
    bpi: []
  }),
  mounted: () => {
    axios.get(`https://api.coindesk.com/v1/bpi/historical/close.jsonp?start=2011-01-01&end=2018-02-01`)
      .then(response => {
        this.bpi = response.data.bpi
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}

这似乎不起作用。我正在使用 Axiom 来获取数据并分配响应，这就是我在网上找到的所有示例都是这样做的，但是我拥有的数组对象仍然是空的，并且它不会在页面上呈现。不知道这里有什么问题？请 Vue 专家帮忙:)

【问题讨论】：

标签： ajax vue.js xmlhttprequest axiom

【解决方案1】：

你的代码有各种各样的问题。

首先，不要在 options 属性或回调上使用箭头函数，因为箭头函数绑定到父上下文，this 不会是您期望的 Vue 实例。

其次，在数据函数中使用return 语句。

第三，创建实例后使用created钩子插入数据。 mounted钩子在DOM渲染后被调用。

export default {
  name: 'App',
  data: function() {
    return {
      bpi: []
    }
  },
  created() {
    axios.get(`https://api.coindesk.com/v1/bpi/historical/close.jsonp?start=2011-01-01&end=2018-02-01`)
      .then(response => {
        this.bpi = response.data.bpi
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}

【讨论】：