Vue slots rowData is not changing after search

diorges

Error messages shown: Theres no error message.
Description of problem: I use vue slots, to use Vue inside the column "action", and after search something, the buttons keep the rowData from the first render even if the whole table has changed.

<DataTable ref="gpon" :ajax="route('provedor.gpon_autorizadas.json')" :columns="gpon.columns" :options="gpon.options" class="mt-6 w-full bg-second rounded shadow overflow-hidden py-1 gis-table text-xs mt-6" >
                <template #column-8="props">
                        <a href="javascript:;" @click="removeOnu(props.cellData)" title="Desautorizar ONU"><vue-feather size="16" type="trash"/></a>
                        <a href="javascript:;" @click="rebootOnu(props.rowData)" title="Reiniciar ONU"><vue-feather size="16" type="refresh-cw"/></a>
                        <a href="javascript:;" title="Acessar ONU"><vue-feather size="16" type="external-link"/></a>
                        <a href="javascript:;" @click="ativarRemoto(props.rowData)" title="Ativar Acesso Remoto"><vue-feather size="16" type="zap"/></a>
                        <a href="javascript:;" @click="modalInfo(props.rowData)" title="Informações da ONU"><vue-feather size="16" type="info"/></a>
                </template>
</DataTable>

The first render of the table, the buttons works ok, but after a search for example, the first column has the same rowData from the first data renderized.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Are you using server-side processing? If so, you'll need 3.0.1 of the datatables.net-vue3 package.

If it isn't that, can you use Stackbltiz or similar to create a test case so I can see and understand the issue please?

Thanks,
Allan

diorges

Thank you, my package was 3.0.0.

allan

Did 3.0.1 resolve the issue? Are you using server-side processing?

Allan

diorges

Yes, the version 3.0.1 solved the problem, I'm using server-side processing.

Thank you again and keep the good work.

allan

Awesome - thanks for the confirmation!

Allan

heymerridew

I have the same problem, the props are not updated when I use reload(), the version I use is 3.0.1 but I am not using ServerSide in this case. I don't know if I'm making a mistake

const datatableColumns = ref([
  { data: 'name', title: 'Nombre' },
  { data: 'type', title: 'Tipo' },
  { data: 'branches', render: '#branches', title: 'Rama' },
  { data: 'updated_at', title: 'Actualizado el' },
  { data: 'editor.name', defaultContent: '', title: 'Actualizado por' },
]);

<DataTable
    id="companies_table"
    ref="datatable"
    class="hover stripe"
    :columns="datatableColumns"
    :options="datatableOptions"
>
    <template #branches="props">
        {{ props.cellData }}
    </template>
</DataTable>

allan

@heymerridew Please create a test case showing the issue on StackBlitz or a minimal Git repo showing the issue so we can offer some help.

Allan

heymerridew

Hi Allan,

This is my stackblitz

In the stackblitzyou can see that all the data in the table is updated except for the slot.