Отношения Vue.JS Vue-Tables Laravel

Я использую 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-ресурсы? У меня есть маршрут /api/footage, который дает мне следующее

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

Теперь у пользователя и видеоряда отношение один ко многим. Как я могу показать пользователю каждую запись? (также идентификатор для редактирования и удаления)

Это код лезвия

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

Спасибо заранее.


javascript vue.js laravel vue-resource
person Mike    schedule 04.04.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете добавить функцию 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.

person Jeff    schedule 04.04.2016
comment
Просто на заметку, может быть немного лучше сделать вызов API в created. ready ждет, пока элемент будет готов, куда created переходит, как только Vue сможет это сделать. - person Bill Criswell; 04.04.2016

arrow_upward
0
arrow_downward

При извлечении асинхронных данных используйте v-if вместе с некоторым флагом «загружено» в компоненте, чтобы обеспечить плавную компиляцию шаблонов.

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

См.: https://github.com/matfish2/vue-tables/issues/20, последний комментарий

person Matanya    schedule 05.04.2016