CODEWITHSUNDEEP
javascriptvue.js
JSRB
JSRB

Reputation: 2613

How to avoid Vue.JS/Axion returning undefined whereas response code is 200?

I have a very simple Vue.JS / Axion Get request to fetch data from an API. When i debug the response it returns a 200 status code and the array/object expected.

But Vue.JS itself returns [Vue warn]: Error in mounted hook: "ReferenceError: response is not defined" why I cannot use the data.

Why is that?

My Javascript code:

  new Vue({
    el: '#app_name',
    data() {
      return {
        info: null
      };
    },
    mounted() {
      axios
        .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
        .then((response)=> {
                   this.info = response;
                  console.log(response);
                });
    }
    }

The html part

          <div class="table">
            <div><p>Team</p></div>
            <div id="app_name"><p>{{ info }}</p></div>

enter image description here

enter image description here

Upvotes: 1

Views: 564

Answers (1)

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

you have to add console.log inside then function after getting response

var app = new Vue({
  el: '#app_name',
  data: {
    info: null
  },
   mounted(){
    let league_id=2;
    axios
        .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
        .then((response)=> {
           this.info = response.data;
          console.log(response.data);  
        });
       
   }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>



  <div class="table">
   <div><p>Team</p></div>
   
   <div id="app_name">
   <p>{{ info }}</p>
   </div>

you can get your data in response.data

Upvotes: 2

Related Questions