Question

我正在使用Vuejs将数据从API显示到模板。我正在试图找出为什么我没有为团队返回数据，所以我可以显示模板。现在，当我使用VueJS Chrome Extention时，它显示该团队是一个空对象。

<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>

Answer 1

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

created () {
 this.fetchInfo()
}

这将调用函数fetchInfo，而this.team依次将获取并填充SELECT s.CustomerID,p.LastName,p.FirstName, s.OrderDate FROM Sales.SalesOrderHeader s,Person.Person p WHERE s.CustomerID = p.BusinessEntityID AND Year(s.OrderDate) IN (2011, 2014) EXCEPT SELECT s.CustomerID,p.LastName,p.FirstName, s.OrderDate FROM Sales.SalesOrderHeader s,Person.Person p WHERE s.CustomerID = p.BusinessEntityID AND Year(s.OrderDate) IN (2012, 2013)

Vue对象为空

1 个答案: