Question

好的，我是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专家请帮助：）

Answer 1

您的代码中存在各种问题。

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

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

第三，在创建实例后使用created钩子插入数据。在呈现DOM之后调用mounted挂钩进行突变。

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

如何从VueJS中的xhr调用响应中获取变量？

1 个答案: