Home » vue » How to make API call using axios in Vue.js?

How to make API call using axios in Vue.js?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have tried to call API using Axios in vue.js app, API called successfully but the value is not affected. I wanted to set value which returns from the API response.

Sample URL

Vue.js code

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

HTML code

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ info }}
</div>
Answers:

I think you missed to include axios

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ info }}
</div>