VueJS来自API调用的数据不会显示

我希望你能帮助我解决这个问题。我试图根据API调用动态显示一些按钮。我只是不想在页面呈现之前设法接收数据。VueJS来自API调用的数据不会显示

new Vue({ 
     el: '#app', 
     data : function(){ 
      return{ 
       results : [], 
      } 
     }, 

     beforeCreate : function(){ 
        axios.get('somesite') 
         .then(function (response) { 
         this.results = response.data; 
         console.log(this.results); 
         }) 
         .catch(function (error) { 
         console.log(error); 
       }); 
      }, 
})

和HTML是：

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
      <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> 

    </head> 
    <body> 
     {% raw %} 
     <div class="container"> 
      <div id="app"> 
       <div class="response_list"> 
        <button class="entries" v-for="entry in results"></button> 
       </div> 
      </div> 
     </div> 
     {% endraw %} 
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script> 

     </body> 
</html>

来源

2017-08-29 user2419831

这确实是:) – Nijikokun

看样子你是不是在你的axios承诺的功能结合到beforeCreate方法的上下文。

通过使用forward arrow function绑定您的组件到axios承诺函数的context，你将能够以更新组件数据正确对象：

beforeCreate : function(){ 
    axios.get('/') 
    .then((response) => { 
     this.results = response.data 
     console.log(this.results) 
    }) 
    .catch((error) => { 
     console.log(error) 
    }); 
},

来源

2017-08-29 20:30:30 Nijikokun

VueJS来自API调用的数据不会显示

回答

相关问题