current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I am using https://github.com/matfish2/vue-tables with Laravel. This is the 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 }],
}
});

How do I get the data from DB for tableData ? Vue-resources? I have a route /api/footage that gives me the following

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

Now, User and Footage have a one to many relationship. How would I go about to show the user for each entry as well? ( also the ID for edit and delete )

This is the blade code 

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

Thank you in advance.

share|improve this question
up vote 1 down vote accepted

You can add a ready() function to call the API when the component is built:

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

You may have to tweak the code based on the format of your API response. Cleaner version if youre using es2016:

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

You should include vue-resource before this, yes. That allows you to use this.$http

As per @BillCriswell you could do this in the created() function to fire off the API call even sooner

share|improve this answer
    
Just a heads up, might be a little better to do the API call in created. ready waits for the element to be ready where created goes as soon as Vue is able to. – Bill Criswell Apr 4 at 13:38
    
Updated, thanks – Jeff Apr 4 at 14:01
up vote 0 down vote

When fetching async data use v-if along with some "loaded" flag on the component to ensure smooth compilation of templates. 

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

See: https://github.com/matfish2/vue-tables/issues/20, last comment

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.