Vue.JS Vue-Tables Laravel Relationship

Question

我正在使用https://github.com/matfish2/vue-tables与Laravel。这是vue代码

Vue.use(VueTables.client, { 
     compileTemplates: true, 
     highlightMatches: true, 
     pagination: { 
     dropdown:true, 
     chunk:5 
     }, 
     filterByColumn: true, 
     texts: { 
      filter: "Search:" 
     }, 
     datepickerOptions: { 
      showDropdowns: true 
     } 
    }); 

    new Vue({ 
     el: "#people", 
     methods: { 
      deleteMe: function(id) { 
       alert("Delete " + id); 
      } 
     }, 
     data: { 
      options: { 
       columns: ['created_at', 'name', 'profession', 'footage_date', 'type', 'link', 'note'], 
       dateColumns: ['footage_date'], 
       headings: { 
        created_at: 'Added', 
        name: 'Name', 
        profession: 'Profesion', 
        footage_date: 'Footage Date', 
        type: 'Type', 
        link: 'Link', 
        note: 'Note', 
        edit: 'Edit', 
        delete: 'Delete' 
       }, 
       templates: { 

        edit: "<a href='#!/{id}/edit'><i class='glyphicon glyphicon-edit'></i></a>", 
        delete: "<a href='javascript:void(0);' @click='$parent.deleteMe({id})'><i class='glyphicon glyphicon-erase'></i></a>" 
       }, 
      }, 
      tableData: [{ InsertDataHere }], 
} 
}); 

如何从数据库获取tableData的数据？ Vue的资源？ 我，让我下面

[ 
{ 
"id": 2, 
"user_id": 11, 
"profession": "profession", 
"type": "GvG", 
"footage_date": { 
"date": "2016-04-01 00:00:00.000000", 
"timezone_type": 2, 
"timezone": "GMT" 
}, 
"link": "some link", 
"note": "description", 
"created_at": "1 hour ago", 
"updated_at": "2016-04-03 23:06:32" 
} 
] 

现在，用户和影片有一个一对多的关系的路线/api/footage。我将如何向每个条目展示用户？ （也可用于编辑的ID和删除）

这是刀片代码

<div id="people" class="container"> 
    <v-client-table :data="tableData" :options="options"></v-client-table> 
</div> 

预先感谢您。

Answer 1

您可以添加一个ready()函数调用API组件生成时：

ready:function(){ 
    this.$http.get('/api/footage') 
     .then(function(response){ 
      this.tableData = response.data 
     }.bind(this)) 
} 

您可能需要调整基于您的API响应的格式的代码。如果你使用的es2016清洁版本：

ready(){ 
    this.$http.get('/api/footage') 
     .then(({data})=>{ 
      this.tableData = data 
     }) 
} 

您应该包括vue-resource在此之前，是的。这允许您使用this.$http

按@BillCriswell你能做到这一点的created()功能断火API调用更早

Answer 2

当与组件上的一些“装”标志一起获取异步数据使用v-if确保模板的顺利编译。

<v-client-table v-if="loaded" :data="tableData" :options="options"></v-client-table> 

见：https://github.com/matfish2/vue-tables/issues/20，最后的评论