来自API调用的VueJS数据不显示[重复]答案

【问题标题】：VueJS Data from API call not displaying [duplicate]来自API调用的VueJS数据不显示[重复]
【发布时间】：2018-02-07 10:06:34
【问题描述】：

我希望你能帮助我解决这个问题。我正在尝试根据 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>

【问题讨论】：

确实是:)

标签： javascript api vue.js

【解决方案1】：

您的 axios 承诺函数中似乎没有绑定到 beforeCreate 方法的上下文。

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

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

【讨论】：