Javascript 来自API调用的VueJS数据未显示_Javascript_Api_Vue.js

Javascript 来自API调用的VueJS数据未显示

javascript api vue.js

Javascript 来自API调用的VueJS数据未显示,javascript,api,vue.js,Javascript,Api,Vue.js,我希望你能帮我做这件事。我试图根据API调用动态显示一些按钮。我只是没能在页面呈现之前接收到数据 new Vue({ el: '#app', data : function(){ return{ results : [], } }, beforeCreate : function(){ axios.get('so

我希望你能帮我做这件事。我试图根据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>


{%raw%}
{%endraw%}

在

axios

promise函数中，您似乎没有绑定到

beforeCreate

方法的上下文

通过使用

向前箭头功能

将组件的

上下文

绑定到

axios

promise功能，您将能够正确更新组件数据对象：

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

您似乎没有绑定到

axios

promise函数中的

beforeCreate

方法的上下文

通过使用

向前箭头功能

将组件的

上下文

绑定到

axios

promise功能，您将能够正确更新组件数据对象：

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

确实是：）确实是：）