Vue.JS Vue-Tablolar Laravel İlişkisi

Question

Laravel ile https://github.com/matfish2/vue-tables kullanıyorum. Bu, vue code

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

Tablo DB için verileri nasıl alabilirim? Vue-kaynaklar? aşağıdaki

[ 
{ 
"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" 
} 
] 

Şimdi, Kullanıcı ve Film birçok ilişki bir tane bana veren bir rota /api/footage var. Her bir giriş için kullanıcıyı nasıl göstereceğim? Bu

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

şimdiden teşekkürler bıçak kodu olan

(ayrıca düzenlemek için kimlik ve silme). Bileşen inşa edildiğinde

Answer 1

Sen apı'sini bir ready() işlevi ekleyebilirsiniz:

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

Sen API yanıtının formatına dayalı kod çimdik gerekebilir. sen es2016 kullanılıyorsa Temizleyici versiyon:

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

, evet bundan önce vue-resource içermelidir. Yani sen API çağrısını ateşlemesi created() fonksiyonunda bu yapabileceğini @BillCriswell gereğince this.$http

kullanmanızı sağlar hatta er

Answer 2

bileşeni üzerinde bazı "yüklü" bayrağıyla birlikte zaman uyumsuz veri kullanımını v-if getirilirken Şablonların düzgün bir şekilde derlenmesini sağlamak için.

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

Bkz: https://github.com/matfish2/vue-tables/issues/20, son yorum