Vue slots rowData is not changing after search

Vue slots rowData is not changing after search

diorgesdiorges Posts: 3Questions: 1Answers: 0
edited March 19 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Answer ✓

    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

  • diorgesdiorges Posts: 3Questions: 1Answers: 0

    Thank you, my package was 3.0.0.

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

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

    Allan

  • diorgesdiorges Posts: 3Questions: 1Answers: 0

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

    Thank you again and keep the good work.

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    Awesome - thanks for the confirmation!

    Allan

  • heymerridewheymerridew Posts: 4Questions: 1Answers: 0

    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>
    
  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    @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

  • heymerridewheymerridew Posts: 4Questions: 1Answers: 0

    Hi Allan,

    This is my stackblitz

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

Sign In or Register to comment.