Failed to execute 'replaceState' on 'History' in vue components

jason_mulya

Error messages shown:
"Failed to execute 'replaceState' on 'History': function(e, n, a, t) {
let l = t.row + "," + t.col;
if (!o[l]) {
let u = (0,vue__WEBP...<omitted>... } could not be cloned."

Description of problem:
I'm using Vue implementation for my Datatables and I tried to follow the instruction in this documentation https://datatables.net/manual/vue#Manual-slots and it shows an error when I try to interact it. I'm using Yajra Datatables for the configuration Datatables in server side and send it to my Vue via Inertia. My Datatables version is 2.0.8 and my Inertia version is 1.2

I defined a prop named "dt_option" as an object that sent from the server-side Yajra Datatables using Inertia. This prop will then be used by Datatables as its configuration

My defineProps code below:

const props = defineProps({ dt_options: Object, })

here is my Vue Datatables code:

<DataTable class="display table table-bordered table-hover table-checkable table-s" id="kt_datatable" style="width: max-content;" :options="dt_options" ref="tableShowDashboard">
<template #action="props">
<Link :href="`/dashboard/shipment/outstanding-dtr/show/detail/${props.rowData.SN_Number}`" method="get" class="btn mr-2 font-weight-bolder">
Detail
</Link>
</template>
</DataTable>

The reason why I use <Link> is because I use Inertia Javascript library in my project to handle page redirection.

the Yajra Datatables code:

Column::make('action')->title('Return Action')->render(function() { return '#action'; })->orderable(false)->searchable(false)->addClass($this->background . ' ' . $this->color),

Do you have any solution for this error? I would appreciate your answer. Thank you

Best Regards,
Jason

allan

Hi Jason,

The DataTables Vue component doesn't use replaceState. Might it be coming from Inertia?

Allan