vuetable-2-如何使用API将数据提取到laravel/vuejs中的表中

我正在尝试在laravel/vuejs中实现vuetable-2，但我不知道如何将数据从api传递到表中，在示例表中，我们的做法如下所示

需要帮忙吗

方法：{loadBooks（）{axios.get（“api/Book”）。然后（{data}）=> （this.Books=data））；} 装入（）{this.loadBooks（）；}

{{Book.name
> }}

这里是Book.vue的完整代码

    <template>
    <div id="app">
        <filter-bar></filter-bar>
        <vuetable
            ref="vuetable"
            api-url="http://vuetable.ratiw.net/api/users"
            :fields="fields"
            pagination-path=""
            :css="css.table"
            :sort-order="sortOrder"
            :multi-sort="true"
            detail-row-component="my-detail-row"
            :append-params="moreParams"
            @vuetable:cell-clicked="onCellClicked"
            @vuetable:pagination-data="onPaginationData"
        ></vuetable>
        <div class="vuetable-pagination">
            <vuetable-pagination-info
                ref="paginationInfo"
                info-class="pagination-info"
            ></vuetable-pagination-info>
            <vuetable-pagination
                ref="pagination"
                :css="css.pagination"
                @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
import accounting from "accounting";
import moment from "moment";
import Vuetable from "vuetable-2/src/components/Vuetable";
import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";
import Vue from "vue";
import VueEvents from "vue-events";
import CustomActions from "./CustomActions";
import DetailRow from "./DetailRow";
import FilterBar from "./FilterBar";
Vue.use(VueEvents);
Vue.component("custom-actions", CustomActions);
Vue.component("my-detail-row", DetailRow);
Vue.component("filter-bar", FilterBar);
export default {
    components: {
        Vuetable,
        VuetablePagination,
        VuetablePaginationInfo
    },
    data() {
        return {
            Books: {},
            getAllBook: {},
            fields: [
                {
                    name: "__sequence",
                    title: "#",
                    titleClass: "text-right",
                    dataClass: "text-right"
                },
                {
                    name: "__checkbox",
                    titleClass: "text-center",
                    dataClass: "text-center"
                },
                {
                    name: "نوم",
                    sortField: "نوم"
                },
                {
                    name: "ایمل",
                    sortField: "ایمل"
                },
                {
                    name: "birthdate",
                    sortField: "birthdate",
                    titleClass: "text-center",
                    dataClass: "text-center",
                    callback: "formatDate|DD-MM-YYYY"
                },
                {
                    name: "nickname",
                    sortField: "nickname",
                    callback: "allcap"
                },
                {
                    name: "gender",
                    sortField: "gender",
                    titleClass: "text-center",
                    dataClass: "text-center",
                    callback: "genderLabel"
                },
                {
                    name: "salary",
                    sortField: "salary",
                    titleClass: "text-center",
                    dataClass: "text-right",
                    callback: "formatNumber"
                },
                {
                    name: "__component:custom-actions",
                    title: "Actions",
                    titleClass: "text-center",
                    dataClass: "text-center"
                }
            ],
            data: [
                {
                    id: 1,
                    name: "xxxxxxxxx",
                    nickname: "xxxxxxx",
                    email: "xxx@xxx.xxx",
                    birthdate: "xxxx-xx-xx",
                    gender: "X",
                    group_id: 1
                },
                {
                    id: 50,
                    name: "xxxxxxxxx",
                    nickname: "xxxxxxx",
                    email: "xxx@xxx.xxx",
                    birthdate: "xxxx-xx-xx",
                    gender: "X",
                    group_id: 3
                }
            ],
            css: {
                table: {
                    tableClass:
                        "table table-bordered table-striped table-hover",
                    ascendingIcon: "glyphicon glyphicon-chevron-up",
                    descendingIcon: "glyphicon glyphicon-chevron-down"
                },
                pagination: {
                    wrapperClass: "pagination",
                    activeClass: "active",
                    disabledClass: "disabled",
                    pageClass: "page",
                    linkClass: "link",
                    icons: {
                        first: "",
                        prev: "",
                        next: "",
                        last: ""
                    }
                },
                icons: {
                    first: "glyphicon glyphicon-step-backward",
                    prev: "glyphicon glyphicon-chevron-left",
                    next: "glyphicon glyphicon-chevron-right",
                    last: "glyphicon glyphicon-step-forward"
                }
            },
            sortOrder: [
                { field: "email", sortField: "email", direction: "asc" }
            ],
            moreParams: {}
        };
    },
    methods: {
        loadBooks() {
            axios.get("api/Book").then(({ data }) => (this.Books = data));
            axios
                .get("api/getAllBook")
                .then(({ data }) => (this.getAllBook = data));
        },
        allcap(value) {
            return value.toUpperCase();
        },
        genderLabel(value) {
            return value === "M"
                ? '<span class="label label-success"><i class="glyphicon glyphicon-star"></i> Male</span>'
                : '<span class="label label-danger"><i class="glyphicon glyphicon-heart"></i> Female</span>';
        },
        formatNumber(value) {
            return accounting.formatNumber(value, 2);
        },
        formatDate(value, fmt = "D MMM YYYY") {
            return value == null ? "" : moment(value, "YYYY-MM-DD").format(fmt);
        },
        onPaginationData(paginationData) {
            this.$refs.pagination.setPaginationData(paginationData);
            this.$refs.paginationInfo.setPaginationData(paginationData);
        },
        onChangePage(page) {
            this.$refs.vuetable.changePage(page);
        },
        onCellClicked(data, field, event) {
            console.log("cellClicked: ", field.name);
            this.$refs.vuetable.toggleDetailRow(data.id);
        }
    },
    events: {
        "filter-set"(filterText) {
            this.moreParams = {
                filter: filterText
            };
            Vue.nextTick(() => this.$refs.vuetable.refresh());
        },
        "filter-reset"() {
            this.moreParams = {};
            Vue.nextTick(() => this.$refs.vuetable.refresh());
        }
    },
    mounted() {
        this.loadBooks();
    },
    created() {
        this.loadBooks();

    }
};
</script>
<style>
.pagination {
    margin: 0;
    float: right;
}
.pagination a.page {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 2px;
}
.pagination a.page.active {
    color: white;
    background-color: #337ab7;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 2px;
}
.pagination a.btn-nav {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 7px;
    margin-right: 2px;
}
.pagination a.btn-nav.disabled {
    color: lightgray;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 7px;
    margin-right: 2px;
    cursor: not-allowed;
}
.pagination-info {
    float: left;
}
</style>

从“会计”导入会计；
从“时刻”中导入时刻；
从“Vuetable-2/src/components/Vuetable”导入Vuetable；
从“vuetable-2/src/components/VuetablePagination”导入VuetablePagination；
从“vuetable-2/src/components/VuetablePaginationInfo”导入VuetablePaginationInfo；
从“Vue”导入Vue；
从“vue事件”导入VueEvents；
从“/CustomActions”导入CustomActions；
从“/DetailRow”导入DetailRow；
从“/FilterBar”导入FilterBar；
Vue.use（VueEvents）；
Vue.组件（“自定义操作”，自定义操作）；
组件（“我的详细信息行”，详细信息行）；
Vue.组件（“滤棒”，滤棒）；
导出默认值{
组成部分：{
Vuetable，
VuetablePagination，
VuetablePaginationInfo
},
数据（）{
返回{
书籍：{}，
getAllBook:{}，
字段：[
{
名称：“_序列”，
标题：“#”，
标题类：“文本右键”，
数据类：“文本右键”
},
{
名称：“\uuuu复选框”，
标题类：“文本中心”，
数据类：“文本中心”
},
{
名称：“نوم”，
索特菲尔德：“نوم”
},
{
名称：“ایمل”，
索特菲尔德：“ایمل”
},
{
姓名：“生日”，
索特菲尔德：“生日”，
标题类：“文本中心”，
数据类：“文本中心”，
回调：“formattate | DD-MM-YYYY”
},
{
姓名：“昵称”，
索特菲尔德：“昵称”，
回调：“allcap”
},
{
姓名：“性别”，
索特菲尔德：“性别”，
标题类：“文本中心”，
数据类：“文本中心”，
回调：“性别标签”
},
{
姓名：“工资”，
索特菲尔德：“薪水”，
标题类：“文本中心”，
dataClass:“文本权限”，
回调：“formatNumber”
},
{
名称：“\u组件：自定义操作”，
标题：“行动”，
标题类：“文本中心”，
数据类：“文本中心”
}
],
数据：[
{
id:1，
名称：“XXXXXXXX”，
昵称：“XXXXXX”，
电子邮件：“xxx@xxx.xxx",
生日：“xxxx xx xx”，
性别：“X”，
组别编号：1
},
{
身份证号码：50，
名称：“XXXXXXXX”，
昵称：“XXXXXX”，
电子邮件：“xxx@xxx.xxx",
生日：“xxxx xx xx”，
性别：“X”，
组别编号：3
}
],
css:{
表:{
表格类别：
“表格边框表格条带表格悬停”，
上升图标：“字形图标字形图标字形图标向上”，
下降图标：“字形图标字形图标向下”
},
分页：{
包装类：“分页”，
activeClass:“活动”，
disabledClass：“已禁用”，
pageClass:“页面”，
链接类：“链接”，
图标：{
首先：“，
上一页：“，
下一步：“，
最后：“”
}
},
图标：{
第一：“字形图标字形图标后退”，
上一个：“左字形图标左字形图标”，
下一步：“右侧字形图标字形图标”，
最后：“Glyphion Glyphion前进”
}
},
排序器：[
{字段：“电子邮件”，sortField：“电子邮件”，方向：“asc”}
],
moreParams:{}
};
},
方法：{
负荷书（）{
get（“api/Book”）。然后（（{data}）=>（this.Books=data））；
axios
.get（“api/getAllBook”）
。然后（（{data}）=>（this.getAllBook=data））；
},
allcap（价值）{
返回值.toUpperCase（）；
},
性别标签（值）{
返回值==“M”
“男性”
：“女性”；
},
格式编号（值）{
返回会计。格式编号（值2）；
},
格式日期（值，fmt=“D MMM YYYY”）{
返回值==null？”：力矩（值，“YYYY-MM-DD”）。格式（fmt）；
},
onPaginationData（paginationData）{
此.$refs.pagination.setPaginationData（paginationData）；
此.$refs.paginationInfo.setPaginationData（paginationData）；
},
onChangePage（第页）{
此.$refs.vuetable.changePage（第页）；
},
单击一次单元格（数据，f
    <template>
    <div id="app">
        <filter-bar></filter-bar>
        <vuetable
            ref="vuetable"
            api-url="http://vuetable.ratiw.net/api/users"
            :fields="fields"
            pagination-path=""
            :css="css.table"
            :sort-order="sortOrder"
            :multi-sort="true"
            detail-row-component="my-detail-row"
            :append-params="moreParams"
            @vuetable:cell-clicked="onCellClicked"
            @vuetable:pagination-data="onPaginationData"
        ></vuetable>
        <div class="vuetable-pagination">
            <vuetable-pagination-info
                ref="paginationInfo"
                info-class="pagination-info"
            ></vuetable-pagination-info>
            <vuetable-pagination
                ref="pagination"
                :css="css.pagination"
                @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
import accounting from "accounting";
import moment from "moment";
import Vuetable from "vuetable-2/src/components/Vuetable";
import VuetablePagination from "vuetable-2/src/components/VuetablePagination";
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo";
import Vue from "vue";
import VueEvents from "vue-events";
import CustomActions from "./CustomActions";
import DetailRow from "./DetailRow";
import FilterBar from "./FilterBar";
Vue.use(VueEvents);
Vue.component("custom-actions", CustomActions);
Vue.component("my-detail-row", DetailRow);
Vue.component("filter-bar", FilterBar);
export default {
    components: {
        Vuetable,
        VuetablePagination,
        VuetablePaginationInfo
    },
    data() {
        return {
            Books: {},
            getAllBook: {},
            fields: [
                {
                    name: "__sequence",
                    title: "#",
                    titleClass: "text-right",
                    dataClass: "text-right"
                },
                {
                    name: "__checkbox",
                    titleClass: "text-center",
                    dataClass: "text-center"
                },
                {
                    name: "نوم",
                    sortField: "نوم"
                },
                {
                    name: "ایمل",
                    sortField: "ایمل"
                },
                {
                    name: "birthdate",
                    sortField: "birthdate",
                    titleClass: "text-center",
                    dataClass: "text-center",
                    callback: "formatDate|DD-MM-YYYY"
                },
                {
                    name: "nickname",
                    sortField: "nickname",
                    callback: "allcap"
                },
                {
                    name: "gender",
                    sortField: "gender",
                    titleClass: "text-center",
                    dataClass: "text-center",
                    callback: "genderLabel"
                },
                {
                    name: "salary",
                    sortField: "salary",
                    titleClass: "text-center",
                    dataClass: "text-right",
                    callback: "formatNumber"
                },
                {
                    name: "__component:custom-actions",
                    title: "Actions",
                    titleClass: "text-center",
                    dataClass: "text-center"
                }
            ],
            data: [
                {
                    id: 1,
                    name: "xxxxxxxxx",
                    nickname: "xxxxxxx",
                    email: "xxx@xxx.xxx",
                    birthdate: "xxxx-xx-xx",
                    gender: "X",
                    group_id: 1
                },
                {
                    id: 50,
                    name: "xxxxxxxxx",
                    nickname: "xxxxxxx",
                    email: "xxx@xxx.xxx",
                    birthdate: "xxxx-xx-xx",
                    gender: "X",
                    group_id: 3
                }
            ],
            css: {
                table: {
                    tableClass:
                        "table table-bordered table-striped table-hover",
                    ascendingIcon: "glyphicon glyphicon-chevron-up",
                    descendingIcon: "glyphicon glyphicon-chevron-down"
                },
                pagination: {
                    wrapperClass: "pagination",
                    activeClass: "active",
                    disabledClass: "disabled",
                    pageClass: "page",
                    linkClass: "link",
                    icons: {
                        first: "",
                        prev: "",
                        next: "",
                        last: ""
                    }
                },
                icons: {
                    first: "glyphicon glyphicon-step-backward",
                    prev: "glyphicon glyphicon-chevron-left",
                    next: "glyphicon glyphicon-chevron-right",
                    last: "glyphicon glyphicon-step-forward"
                }
            },
            sortOrder: [
                { field: "email", sortField: "email", direction: "asc" }
            ],
            moreParams: {}
        };
    },
    methods: {
        loadBooks() {
            axios.get("api/Book").then(({ data }) => (this.Books = data));
            axios
                .get("api/getAllBook")
                .then(({ data }) => (this.getAllBook = data));
        },
        allcap(value) {
            return value.toUpperCase();
        },
        genderLabel(value) {
            return value === "M"
                ? '<span class="label label-success"><i class="glyphicon glyphicon-star"></i> Male</span>'
                : '<span class="label label-danger"><i class="glyphicon glyphicon-heart"></i> Female</span>';
        },
        formatNumber(value) {
            return accounting.formatNumber(value, 2);
        },
        formatDate(value, fmt = "D MMM YYYY") {
            return value == null ? "" : moment(value, "YYYY-MM-DD").format(fmt);
        },
        onPaginationData(paginationData) {
            this.$refs.pagination.setPaginationData(paginationData);
            this.$refs.paginationInfo.setPaginationData(paginationData);
        },
        onChangePage(page) {
            this.$refs.vuetable.changePage(page);
        },
        onCellClicked(data, field, event) {
            console.log("cellClicked: ", field.name);
            this.$refs.vuetable.toggleDetailRow(data.id);
        }
    },
    events: {
        "filter-set"(filterText) {
            this.moreParams = {
                filter: filterText
            };
            Vue.nextTick(() => this.$refs.vuetable.refresh());
        },
        "filter-reset"() {
            this.moreParams = {};
            Vue.nextTick(() => this.$refs.vuetable.refresh());
        }
    },
    mounted() {
        this.loadBooks();
    },
    created() {
        this.loadBooks();

    }
};
</script>
<style>
.pagination {
    margin: 0;
    float: right;
}
.pagination a.page {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 2px;
}
.pagination a.page.active {
    color: white;
    background-color: #337ab7;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 2px;
}
.pagination a.btn-nav {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 7px;
    margin-right: 2px;
}
.pagination a.btn-nav.disabled {
    color: lightgray;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 5px 7px;
    margin-right: 2px;
    cursor: not-allowed;
}
.pagination-info {
    float: left;
}
</style>