Im using Datatable.net and vuejs3 and inertiaJs and laravel 10

hblms

the code:

 <tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">
                                <td>
                                    <SimpleLink v-tooltip="`Voir le contrat en PDF`" :href="`/p/sub-rental/${subRental.id}`">{{ subRental.ref }}</SimpleLink>
                                </td>
                                <td>{{ subRental.company ? subRental.company.name : "Non-défini" }}</td>
                                <td>
                                    <NavLink class="" :href="`/clients/${subRental.client.id}/edit`">
                                        {{ subRental.client.is_company ? (subRental.client.company_name?.trim() || subRental.client.fullname) : subRental.client.fullname }}
                                    </NavLink>
                                </td>
                                <td>
                                    <Division class="d-flex">
                                        <Image :height="30" class="me-2 my-auto" :width="30" :src="'/images/brands/' + subRental.brand.logo" />
                                        <Division class="my-auto">
                                            <Text class="m-0 text-nowrap">{{ subRental.registration }}</Text>
                                            <SpanField class="text-uppercase bg-teal-600 badge px-1">{{ subRental.model }}</SpanField>
                                        </Division>
                                    </Division>
                                </td>
                                <td>
                                    <Text class="m-0 border mb-1 badge text-primary border-2 border-primary">TOTAL: {{ formatCurrency(subRental.total) }}</Text>
                                    <Text class="m-0 border mb-1 badge border-2" :class="remainingAmount(subRental.total, subRental.amount_paid) > 0 ? 'border-danger text-danger' : 'border-success text-success'">
                                        RESTE: {{ formatCurrency(remainingAmount(subRental.total, subRental.amount_paid)) }}
                                    </Text>
                                    <br />
                                    <template v-if="$hasPermission('list_payments_sub_rental')">
                                        <NavLink class="btn btn-sm btn-success px-4 py-0" :href="`/sub-rental/${subRental.id}/payments-history`">Payé</NavLink>
                                    </template>
                                </td>
                                <td>
                                    {{ formatCurrency(subRental.rent_price) }}
                                    <Text class="m-0 border mb-1 badge text-primary border-2 border-primary">ST: {{ formatCurrency(subRental.rent_price_base || 0) }}</Text>
                                </td>
                                <td>{{ formatDateTime(subRental.start_date) }}</td>
                                <td>
                                    {{ formatDateTime(subRental.end_date) }}
                                    <SpanField :class="getStatusClass(subRental.start_date, subRental.end_date)">
                                        {{ getStatus(subRental.start_date, subRental.end_date) }}
                                    </SpanField>
                                    <Text class="m-0 badge bg-brown-400" v-if="subRental.extended_duration">Prolonger: {{ subRental.extended_duration }} {{ subRental.is_monthly ? 'Mois' : `Jour${subRental.extended_duration !== 1 ? 's' : ''}` }}</Text>
                                </td>
                                <td>
                                    <Text class="m-0 badge bg-teal">TOTAL: {{ formatCurrency(subRental.rent_total || 0) }}</Text>
                                    <Text class="m-0 badge bg-orange">DUE: {{ formatCurrency(subRental.rent_total_base || 0) }}</Text>
                                    <Text class="m-0 badge bg-info">BENIFICE: {{ formatCurrency((subRental.rent_total || 0) - (subRental.rent_total_base || 0)) }}</Text>
                                </td>
                                <td>
                                    <SpanField v-if="subRental.agency" class="badge" :class="subRental.agency.color">
                                        {{ subRental.agency.company_name }}
                                    </SpanField>
                                    <template v-else>Non-défini</template>
                                </td>
                                <td>
                                    <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_sub_rental')">
                                                <li><Button class="dropdown-item text-success" @click="closeSubRentalFunc(subRental)">Fermer la sous-location</Button></li>
                                                <li><hr class="m-1" /></li>
                                                <li><NavLink class="dropdown-item" :href="`/sub-rentals/${subRental.id}/edit`">Modifier</NavLink></li>
                                                <li><Button class="dropdown-item" @click="extendedDuration(subRental)">Prolonger</Button></li>
                                            </template>
                                            <template v-if="$hasPermission('list_payments_sub_rental')">
                                                <li><NavLink class="dropdown-item" :href="`/sub-rental/${subRental.id}/payments-history`">Paiements</NavLink></li>
                                                <li><NavLink class="dropdown-item" :href="`/sub-rental/paid/${subRental.id}/payments-history`">Paiements du sous-locataire</NavLink></li>
                                                <li><hr class="m-1" /></li>
                                            </template>
                                            <li><SimpleLink class="dropdown-item" :href="`/p/sub-rental/${subRental.id}`">Voir le contrat</SimpleLink></li>
                                            <template v-if="$hasPermission('create_sub_rental_invoice')">
                                                <li v-if="subRental.invoice"><SimpleLink class="dropdown-item" :href="`/p/invoice/${subRental.invoice.id}`">Voir la facture</SimpleLink></li>
                                                <li v-else><Button class="dropdown-item" @click="invoiceGenerate(subRental.client, subRental.id)">Générer une facture</Button></li>
                                            </template>
                                            <template v-if="$hasPermission('edit_sub_rental')">
                                                <li><Button class="dropdown-item text-warning" @click="cancelReservation(subRental.id)">Annuler la sous-location</Button></li>
                                            </template>
                                            <template v-if="$hasPermission('delete_sub_rental')">
                                                <li><hr class="m-1" /></li>
                                                <li><Button class="dropdown-item text-danger" @click="deleteItem(subRental.id)">Supprimer la sous-location</Button></li>
                                            </template>
                                        </ul>
                                    </Division>
                                </td>
                            </tr>

i have question im using this is work for me good but i have problem the subrental object
this list for subrental not closed and i when i closed it move to otther page
and the problem is when i make an subrental closed with modal and PUT method with inerta form helper it work but when i search for it in datatable it show like datatable save old state of object and same when datatable has one row and i closed it show error in console about nextSibling on null??

allan

Don't use a v-for to create a DataTable. You run into issues with both DataTables and Vue controlling the same DOM elements - it simply doesn't work.

You need to either pass data as a parameter or us Ajax sourced data.

Allan