用vue-js和Laravel制作表格

Question

我正开始学习laravel和vue-js，因此这对我来说相当困难。我想在vue-js中使用表格，排序和分页来制作组件。 当我开始该项目时，我仅使用Laravel和jquery，所以现在我转向vue js，而且它变得越来越复杂。我有这个：

在我的index.blade.php

@extends('layouts.dashboard')


@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <table class="table">
                    <thead>
                    <tr>
                        <th> @sortablelink('first_name','First name') </th>
                        <th> @sortablelink('last_name', 'Last name') </th>
                        <th> @sortablelink('email', 'E-mail address') </th>
                        <th> @sortablelink('created_at', 'Creation date') </th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody is="submissions"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">
                {{ $submissions->appends(\Request::except('page'))->render() }}
                <div class="total-submissions">
                    Total submissions:
                    {{ $submissions->firstItem() }}-{{ $submissions->lastItem() }} of {{ \App\Submission::count() }}
                </div>
            </div>
        </div>
    </div>
@stop

在我的组件Submissions.vue中：

<template>
    <tbody>
    <tr v-for="submission in submissions" :key="submission.id">
        <td> {{submission.first_name}}</td>
        <td> {{submission.last_name}} </td>
        <td> {{submission.email}} </td>
        <td> {{submission.created_at}} </td>
        <td>
            <a class="btn btn-default btn-primary" id="btn-view"
               :href="'/dashboard/submissions/' + submission.id">View</a>
            <a class="btn btn-default btn-primary"
               id="btn-delete"
               :href="'/dashboard/submissions'"
               @click.prevent="deleteSubmission(submission)">Delete</a>
            <label class="switch">
                <input class="slider-read" name="is_read"
                       v-model="submission.is_checked"
                       @change="updateCheckbox(submission)"
                       type="checkbox">
                <span class="slider round"></span>
            </label>
        </td>
    </tr>
    </tbody>
</template>

<script>
    import qs from 'qs';
    import axios from 'axios';

    export default {
        data: function () {
            return {
                submissions: [],
            }
        },

        beforeCreate() {

        },
        created() {

        },
        mounted() {
            this.fetch();
        },
        methods: {
            fetch: function () {
                let loader = this.$loading.show();
                var queryString = window.location.search;
                if (queryString.charAt(0) === '?')
                    queryString = queryString.slice(1);

                var args = window._.defaults(qs.parse(queryString), {
                    page: 1,
                    sort: 'id',
                    order: 'asc'
                });

                window.axios.get('/api/submissions?' + qs.stringify(args)).then((response) => {
                    loader.hide();
                    this.submissions = response.data.data
                });
            },
            deleteSubmission(submission) {
                this.$dialog.confirm("Are you sure you want to delete this record?", {
                    loader: true
                })
                    .then((dialog) => {
                        axios.delete('api/submissions/' + submission.id)
                            .then((res) => {
                                this.fetch()
                            })
                            .catch((err) => console.error(err));

                        setTimeout(() => {
                            console.log('Delete action completed');
                            swal({
                                title: "Update Completed!",
                                text: "",
                                icon: "success",
                            });
                            dialog.close();
                        }, 1000);
                    })
                    .catch(() => {
                        console.log('Delete aborted');
                    });
            },
            updateCheckbox(submission)
            {
                this.$dialog.confirm("Are you sure?", {
                    loader: true
                })
                    .then((dialog) => {
                        axios.put('/api/submissions/' + submission.id, submission,
                        )
                            .then(function (response) {
                                console.log(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                        setTimeout(() => {
                            console.log('Action completed');
                            dialog.close();
                            swal({
                                title: "Update Completed!",
                                text: "",
                                icon: "success",
                            });
                        }, 0);
                    })
                    .catch(() => {
                        submission.is_checked === false ? submission.is_checked = true : submission.is_checked = false;
                        console.log('Aborted');
                    });
            },
        }
    }
</script>

现在我要完成的工作：将所有内容放入组件中，但是既然我在表中有php来对所有内容进行排序，那么如何在vue中做到这一点？我正在尝试使用引导Vue表，但是不确定是否可以显示这样的数据。预先感谢。