javascript - 如何避免 Vue.JS/Axion 返回未定义而响应代码为 200？

Question

我有一个非常简单的 Vue.JS/Axion Get 请求来从 API 获取数据。当我调试响应时，它返回 200 状态代码和预期的数组/对象。

但 Vue.JS 本身返回 [Vue warn]: Error in mounted hook: "ReferenceError: response is not defined"为什么我不能使用这些数据。

这是为什么？

我的 Javascript 代码:

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

html部分

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

Answer 1

得到响应后必须在里面添加console.log然后函数

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>

你可以在response.data中获取你的数据