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方法のコンテキストにバインドされていません表示されます。あなたがコンポーネントデータを更新することができるようになりますaxios約束関数へのコンポーネントのcontextをバインドするforward arrow functionを使用することにより

が正しくオブジェクト：

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呼び出しからのデータが表示されない

答えて

関連する問題