I'm currently facing an issue with a project I'm handling. The data in question is stored in a v data table, where the header data is retrieved from an external API. Inside this table, there are checkboxes for users to select specific businesses and/or document numbers. The selected data can be printed to a PDF when a document number is chosen.
However, when a user sorts the table by clicking on a header in the v data table, all checkboxes get highlighted but the print PDF button fails to appear. Upon investigating, it seems that the checkboxes are not being sorted along with the rest of the data in the table. I've attempted different solutions like clearing the checkbox data array and adding logic to clear the checkboxes upon header selection, but these did not work.
Below is a snippet of the code used in this project, which was built using Vue and Vuetify 2.6:
<v-data-table
dense
:headers="headers"
:page.sync="page"
:items="olpayments"
:search="search"
@click:row="getinfo"
hide-default-footer
:items-per-page="ipp"
>
<template v-slot:top>
<v-row>
<v-btn v-if="olpayments.length>10" :disabled="btndisabled" dense class="mt-1 ml-8" color="success" @click="showall">{{sar}}</v-btn>
<v-divider vertical class="mx-2"></v-divider>
<v-text-field
dense
v-model="search"
label="Search "
class="mx-4"
></v-text-field>
</v-row>
</template>
<template v-slot:item.prikey="{item}">
<v-checkbox
v-model="cb"
class="cbp"
ref="n"
:label="item.prikey.toString()"
:value="item.prikey"
@click.native.stop
></v-checkbox>
</template>
...
</v-data-table>