Vue.js - axios is undefined when trying to store and display vue-axios response data

Question

I cannot seem to able to get vue-axios to fetch, store and display data in browser. I tried this and getting undefined when getData button is clicked.

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/[email protected]/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>

Husam Elbashir · Accepted Answer · 2018-10-05 22:09:07Z

I would add to @boussadjrabrahim's excellent answer that you need to use a fat arrow notation inside your then callback to make sure that the this keyword is bound to your Vue instance. Otherwise your dataReceived will remain blank.

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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>

Boussadjra Brahim · Accepted Answer · 2018-10-05 22:11:56Z

You're missing axios library so add it as follow :

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

Another thing to rectify is this.response change it to 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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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>

Collectives™ on Stack Overflow

Vue.js - axios is undefined when trying to store and display vue-axios response data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related