Я пытаюсь реализовать vuetable-2 в laravel / vuejs, но я не знаю, как передать данные в таблицу из API, в примере таблицы мы делаем это, как показано ниже.
Любая помощь, пожалуйста
методы: {loadBooks () {ax ios .get ("api / Book"). Then (({data}) => (this.Books = data)); } mount () {this.loadBooks (); },
> <tr v-for="Book in Books.data" v-bind:key="Book.id"> <td>{{ Book.name
> }}</td></tr>
здесь полный код Книги. 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>