hi, i have a problem with datatables.net-vue3

hblms

"datatables.net-dt": "^2.1.8",
"datatables.net-vue3": "^3.0.2",

<DataTable :columns="contractColumns"  :data="contracts">
                        <template #contractRef="{ rowData }">
                            <SimpleLink class="" v-tooltip="`Voir le contrat en PDF`" :href="`/p/contract/${rowData.id}`">
                                {{ rowData.ref }}
                            </SimpleLink>                                
                        </template>
                        <template #endDate="{ rowData }">
                            <Text class="m-0">{{ formatDateTime(rowData.end_date) }}</Text>
                            <SpanField :class="getStatusClass(rowData.start_date, rowData.end_date)">
                                {{ getStatus(rowData.start_date, rowData.end_date) }}
                            </SpanField>
                            <Text class="m-0 badge bg-brown-400" v-if="rowData.extended_duration">Prolonger: {{ rowData.extended_duration }} {{ rowData.is_monthly ? 'Mois' : `Jour${rowData.extended_duration !== 1 ? 's' : ''}` }}</Text>
                        </template>
                        <template #actions="{ rowData }">
                            <Division class="dropdown position-relative">
                                <Button class="btn btn-sm btn-outline-primary rounded dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                    Actions
                                </Button>
                                <ul class="dropdown-menu dropdown-menu-end text-sm" aria-labelledby="dropdownMenuButton">
                                    <template v-if="$hasPermission('edit_contract')">
                                        <li><Button class="dropdown-item text-success" @click="closeContract(rowData)">Fermer contrat</Button></li>
                                        <li><hr class="m-1" /></li>
                                        <li><NavLink class="dropdown-item" :href="`/contracts/${rowData.id}/edit`">Modifier</NavLink></li>
                                        <li><Button class="dropdown-item" @click="extendedDuration(rowData)">Prolonger</Button></li>
                                    </template>
                                    <template v-if="$hasPermission('delete_contract')">
                                        <li><hr class="m-1" /></li>
                                        <li><Button class="dropdown-item text-danger" @click="deleteItem(rowData.id)">Supprimer le contrat</Button></li>
                                    </template>
                                </ul>
                            </Division>
                        </template>
                    </DataTable>

            <ExtendedDurationModal ref="ExtendedDurationRef" url="contract-extend-duration" />

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';
import $ from 'jquery';

DataTable.use(DataTablesCore);
import "datatables.net-dt/css/dataTables.dataTables.min.css";
const contractColumns = [
    { title: 'Contrat', data: null, render: '#contractRef' },
    // { title: 'Nature', data: null, render: '#company' },
    // { title: 'Client', data: null, render: '#client' },
    // { title: 'Véhicule', data: null, render: '#vehicle' },
    // { title: 'Avances', data: null, render: '#total' },
    // { title: 'Prix de location', data: null, render: '#rentPrice' },
    // { title: 'Sortie le', data: null, render: '#startDate' },
    { title: 'Retour le', data: null, render: '#endDate' },
    // { title: 'Agence', data: null, render: '#agency' },
    { title: 'Actions', data: null, render: '#actions' },
];

import ExtendedDurationModal from '@/Components/Contract/ExtendedDurationModal.vue';



const ExtendedDurationRef = ref(null);


const props = defineProps({
    contracts: Object
});

const extendedDuration = (contractObject) => {   
    ExtendedDurationRef.value.openModalExtended(contractObject)
}

here all is work good but just one thing for example i go to page dashboard and return i return to list contract and i click for actions for extended duration it show me
Uncaught TypeError: Cannot read properties of null (reading 'openModalExtended')

allan

I don't know what openModalExtended is. That isn't part of the DataTables code base and it appears to come from @/Components/Contract/ExtendedDurationModal.vue. That presumably is a custom component? In which case this has nothing to do with DataTables unless I'm misunderstanding?

Allan

hblms

@/Components/Contract/ExtendedDurationModal.vue this is modal

and i use

const extendedDuration = (contractObject) => {
    console.log('touched');
    
    ExtendedDurationRef.value.openModalExtended(contractObject)
}

for open modal of extended duration

so the problem is when i reload entire oage and i click on

                                        <li><Button class="dropdown-item" @click="extendedDuration(rowData)">Prolonger</Button></li>

it work but when i navigate in my app like i go to dashboard the i clike in side list contracts and then i click on
the button it show

Uncaught TypeError: Cannot read properties of null (reading 'openModalExtended')

like fucntion doesnt exist but it exist

hblms

and other thing i thing its related with this is when i click on update it go to page update and update when i return it show old values not updated untill i reload entire page

allan

I'm still not clear on how that relates to DataTables?

If you could create a minimal test case showing the issue on Stackbltiz or a git repo that might clear things up a bit.

Allan

hblms

ok i will make an short video better because i work with laravel and inertiajs and vuejs3

hblms

https://vioo.cc/v/3z1aS
here is an video contain short about the issue
when i update it and return the page of contract datatable not retireve new data until i reload

allan

Thank you - Unfortunately I can't debug a video. For free support, please create a test case on StackBltiz showing the issue.

Allan