Vue.JS Vue-Tablesラベリング関係

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 }], 
} 
}); 

DBからどのようにデータを取得するのですか？ビューリソース？ 私は私に次のよう

今

[ 
{ 
"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を持って、ユーザーおよび映像は、多くの関係に1を持っています。どのようにして各エントリのユーザーも表示するにはどうすればよいですか？ （また、編集のためのIDと削除）

これは、ブレードコード

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

では、事前にありがとうございます。

Answer 1

あなたは、コンポーネントが構築されたときにAPIを呼び出すためにready()機能を追加することができます。

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

あなたのAPIレスポンスのフォーマットに基づいてコードを微調整する必要があります。 youreのes2016使用している場合クリーナーバージョン：

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

をあなたはそう、この前vue-resourceを含める必要があります。それはあなたがAPI呼び出しをオフに解雇するcreated()機能でこれを行うことができ@BillCriswellあたりとしてthis.$http

を使用することができますでも早く

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、最後のコメント