Vue.JS Vue-Tabellen Laravel Beziehung

Question

Ich benutze https://github.com/matfish2/vue-tables mit Laravel. Dies ist der 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 }], 
} 
}); 

Wie bekomme ich die Daten aus der DB für tableData? Vue-Ressourcen? Ich habe eine Route /api/footage, die mir die folgenden

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

Nun gibt, Benutzer und Video eine Eins-zu-Beziehung haben. Wie würde ich den Benutzer für jeden Eintrag anzeigen? (Auch die ID zum Bearbeiten und Löschen)

Dies ist die Klinge Code

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

Vielen Dank im Voraus.

Answer 1

Sie können eine ready() Funktion fügen Sie die API aufrufen, wenn die Komponente eingebaut ist:

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

Sie müssen den Code basierend auf dem Format der API-Antwort optimieren können. Sauberere Version, wenn youre ES2016 mit:

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

Sie sollten vue-resource bevor diese enthalten, ja. Das erlaubt Ihnen, this.$http

Per verwenden @BillCriswell Sie dies in der created() Funktion tun könnte, den API-Aufruf noch früher

Answer 2

Beim Abrufen von asynchronen Daten Verwendung v-if zusammen mit einigen „geladen“ Flagge auf der Komponente abzufeuern um eine reibungslose Erstellung von Vorlagen zu gewährleisten.

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

Siehe auch: https://github.com/matfish2/vue-tables/issues/20, letzter Kommentar