Vue.js - 尝试存储和显示 vue-axios 响应数据时未定义 axios答案

【问题标题】：Vue.js - axios is undefined when trying to store and display vue-axios response dataVue.js - 尝试存储和显示 vue-axios 响应数据时未定义 axios
【发布时间】：2019-03-11 10:26:17
【问题描述】：

我似乎无法让vue-axios 在浏览器中获取、存储和显示数据。我试过这个并在单击getData 按钮时得到undefined。

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then(function(response) {
          this.dataReceived = this.response;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript vue.js vuejs2 axios vue-component

【解决方案1】：

您缺少 axios 库，因此添加如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

另外要纠正的是this.response改成response.data

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response)=> {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我会在@boussadjrabrahim 的出色答案中添加您需要在then 回调中使用粗箭头表示法以确保this 关键字绑定到您的Vue 实例。否则您的dataReceived 将保持空白。

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response) => {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

</html>

【讨论】：