我正在使用 vue-good-table 并且一切都在 localhost 中运行。但是在我查看了我的 Vercel 之后，我得到了一个错误InternalError: too much recursion
组件/VueGoodTable.vue
<template>
<div>
<vue-good-table
mode="remote"
@on-search="onSearch"
@on-page-change="onPageChange"
@on-column-filter="onColumnFilter"
@on-per-page-change="onPerPageChange"
:totalRows="totalRecords"
:isLoading.sync="isLoading"
:pagination-options="{
enabled: true,
perPage: serverParams.perPage,
dropdownAllowAll: false,
}"
:rows="rows"
:columns="columns"
:search-options="{
enabled: true,
searchFn: onSearch,
}"
:sort-options="{
enabled: false,
}"
>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'image'">
<img
:src="
'https://waarungg.devryank.tech/public/images/' +
pageActive +
'/' +
rows[props.index].image
"
width="100"
class="mx-auto my-2"
/>
</span>
<span v-else-if="props.column.field == 'action'">
<div class="flex">
<div
class="flex flex flex-auto justify-center content-center justify-center content-center"
v-if="pageActive == 'orders' || pageActive == 'products'"
>
<nuxt-link
:to="{
name: 'dashboard-' + pageActive + '-detail',
params: { detail: rows[props.index][slug] },
}"
><svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
></path></svg
></nuxt-link>
</div>
<div
class="flex flex-auto justify-center content-center"
v-if="pageActive == 'products'"
>
<nuxt-link
:to="{
name: 'dashboard-' + pageActive + '-edit',
params: { edit: rows[props.index][slug] },
}"
class="cursor-pointer"
><svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
></path>
</svg>
</nuxt-link>
</div>
<div
class="flex flex-auto justify-center content-center"
v-if="pageActive == 'products'"
>
<button
@click="deleteItem(rows[props.index][slug])"
class="cursor-pointer btn-delete"
:id="rows[props.index][slug]"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
></path>
</svg>
</button>
<div
style="display: none;"
:id="'delete-' + rows[props.index][slug]"
class="alert-delete"
>
<AlertDelete
:deleteSlug="deleteSlug"
@clickDelete="confirmDeleteItem"
@clickCancel="cancelDeleteItem"
/>
</div>
</div>
</div>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
import Vue from 'vue';
import VueGoodTablePlugin from 'vue-good-table';
// import the styles
import 'vue-good-table/dist/vue-good-table.css';
Vue.use(VueGoodTablePlugin);
export default {
name: 'VueTable',
props: {
endpoint: {},
slug: {},
columns: {
type: Array,
},
},
data() {
return {
isLoading: false,
rows: [],
totalRecords: 0,
serverParams: {
// columnFilters: {},
searchTerm: '',
page: 1,
perPage: 10,
},
showAlert: false,
deleteSlug: '',
pageActive: '',
};
},
mounted() {
let segments = location.pathname.split('/');
this.pageActive = segments[2];
this.loadItems();
},
methods: {
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
onPageChange(params) {
this.updateParams({ page: params.currentPage });
this.loadItems();
},
onPerPageChange(params) {
this.updateParams({ perPage: params.currentPerPage });
this.loadItems();
},
onColumnFilter(params) {
this.updateParams(params);
this.loadItems();
},
onSearch(params) {
this.serverParams.searchTerm = params.searchTerm;
this.loadItems();
},
// load items is what brings back the rows from server
loadItems() {
const data = new FormData();
data.append('searchTerm', this.serverParams.searchTerm);
data.append('per_page', this.serverParams.perPage);
// console.log(this.serverParams.searchTerm);
this.$axios
.post(`${this.endpoint}?page=` + this.serverParams.page, data, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token'),
},
})
.then(response => {
this.totalRecords = response.data.total;
this.rows = response.data.data;
console.log(response.data.data);
});
},
resetStyle() {
var alertDelete = document.getElementsByClassName('alert-delete');
for (var i = 0; i < alertDelete.length; i += 1) {
alertDelete[i].style.display = 'none';
}
var btnDelete = document.getElementsByClassName('btn-delete');
for (var i = 0; i < btnDelete.length; i += 1) {
btnDelete[i].style.display = 'block';
}
},
deleteItem(deleteSlug) {
this.resetStyle();
this.showAlert = !this.showAlert;
this.deleteSlug = deleteSlug;
document.getElementById(deleteSlug).style.display = 'none';
document.getElementById('delete-' + deleteSlug).style.display = 'block';
},
async confirmDeleteItem(deleteSlug) {
try {
await this.$axios
.delete(`api/${this.pageActive}/delete/${deleteSlug}`, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token'),
},
})
.then(res => {
this.resetStyle();
this.$axios
.$get(`api/${this.pageActive}`, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token'),
},
})
.then(response => {
// assign response to state "products"
location.reload();
})
.catch(error => {
console.error(error);
});
});
} catch (e) {
console.log(e.response);
}
},
async cancelDeleteItem(deleteSlug) {
this.resetStyle();
this.showAlert = !this.showAlert;
this.deleteSlug = '';
document.getElementById(deleteSlug).style.display = 'block';
document.getElementById('delete-' + deleteSlug).style.display = 'none';
},
},
};
</script>
页面/仪表板/订单/index.vue
<template>
<div>
<div class="container px-6 mx-auto grid">
<h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
Order
</h2>
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<client-only>
<VueGoodTable
endpoint="api/orders"
slug="merchant_ref"
:columns="[
{
label: 'Kode Invoice',
field: 'merchant_ref',
},
{
label: 'Nama',
field: 'customer_name',
},
{
label: 'Kode Resi',
field: 'receipt_code',
},
{
label: 'Tanggal Order',
field: 'timestamp.created_at',
},
{
label: 'Status',
field: 'status',
},
{
label: 'Action',
field: 'action',
},
]"
/>
</client-only>
</div>
<div
class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
layout: 'dashboard',
};
</script>
我不确定这是否是 Vercel 构建的错误，因为我在 Vercel 的日志中没有发现任何错误。谢谢
编辑
在我像kissu所说的那样在本地构建我的应用程序之后，它也显示了一个错误。开发和生产有什么区别？