Vue 对象为空答案

【问题标题】：Vue Object is EmptyVue 对象为空
【发布时间】：2017-11-14 15:46:20
【问题描述】：

我正在使用 Vuejs 将数据从 API 显示到模板。我试图弄清楚为什么我没有为团队返回数据，以便我可以在模板中显示。现在，当我使用 VueJS Chrome 扩展时，它显示团队是一个空对象。

<div v-if="team">
    <div class="row">
       <div class="col-12 col-sm-12">
          <div class="fw-700 pb3 mb5" style="border-bottom: 1px solid #333;">Name:</div>
       <div class="mb10" style="font-size: 20px;">{{ team.name }}</div>
   </div>
</div>


<script>

    module.exports = {
        http: {
            headers: {
               'X-CSRF-TOKEN': window.Laravel.csrfToken
            }
        },
        props: [ 'id', 'editable' ],
        data: function(){
            return {
                modalName: 'additionalInfo',
                team:{

                }
            }
        };
     },
     methods: {
         fetchInfo: function(){
             this.$http.get('/api/teams/info', { params: { id: this.id } }).then((response) => {
             this.team = response.data;
         });
      },
    },
  }
}
</script>

【问题讨论】：

标签： laravel laravel-5 vue.js

【解决方案1】：

它是空的，因为你的方法fetchInfo 没有被调用，所以你需要做这样的事情：

created () {
 this.fetchInfo()
}

这将调用函数fetchInfo，而该函数又会获取并填充this.team

【讨论】：

我还在学习，但是谢谢。这是一个简单的解决方案。