Export Csv on my local instance i am facing issue.

[aliibrahimroshan]

Previously this issue is been resolved in v3.2.2 but i am using 3.7.2 right now but still facing the same issue.

previous link
#941

Here is the error i am facing

Uncaught TypeError: Cannot read properties of undefined (reading 'exportCSV')
at onClick._cache.._cache. (main.js:27208)
at callWithErrorHandling (main.js:14098)
at callWithAsyncErrorHandling (main.js:14107)
at HTMLButtonElement.invoker (main.js:15542)

Html

<Button icon="pi pi-external-link" @click="exportCSV($event)" />

Js/Ts

exportCSV() {
const dt = ref();
dt.value.exportCSV();
}

[tugcekucukoglu]

What is your exact test case? I didn't replicate the issue with this codesandbox https://codesandbox.io/s/g3xzj?file=/src/DataTableExportDemo.vue

[aliibrahimroshan]

Here is my use case i am using vue3/typescript

<template>
  <section>
    <div class="app-container">
      <Toolbar>
        <template v-slot:left>
          <Breadcrumb :home="home" :model="items" class="p-menuitem-text" />
        </template>

        <template v-slot:right>
          <div class="p-mx-2">
            <Button
              icon="pi pi-download"
              label="Download Sample"
              class="p-button-success"
              @click="downloadSample($event)"
            />
          </div>
        </template>
      </Toolbar>
      <p class="st-style p-text-center">
        <b>{{ statement }}</b>
      </p>
      <DataTable
        v-model:first.sync="goToFirstLink"
        :value="lists"
        :lazy="true"
        :paginator="checkPagination"
        :rows="limit"
        :totalRecords="totalRecords"
        :scrollable="true"
        ref="dt" 
        @page="onPage($event)"
        class="p-datatable-sm p-datatable-striped p-datatable-gridlines"
      >
        <template #empty>
          <div class="p-text-center p-p-3">No records found</div>
        </template>
        <Column header="Created Date">
          <template #body="slotProps">
            {{ formatDateTime(slotProps.data.created_at) }}
          </template>
        </Column>
        <Column header="Updated Date">
          <template #body="slotProps">
            {{ formatDateTime(slotProps.data.updated_at) }}
          </template>
        </Column>
        <Column header="Voucher Date">
          <template #body="slotProps">
            {{ formatDate(slotProps.data.voucher_date) }}
          </template>
        </Column>
        <Column field="voucher_no" header="Voucher No"></Column>
        <Column field="profile_name" header="Account Title"></Column>
        <Column header="Total Amount">
          <template #body="slotProps">
            $ {{ fixDigits(slotProps.data.total_amount) }}
          </template>
        </Column>
        <Column field="memo" header="Description"></Column>
        <Column field="type" header="Voucher Type"></Column>
        <Column field="user_name.userName" header="Created By"></Column>
        <Column header="Store Name">
          <template #body="slotProps">
            {{ slotProps.data.branch.branchName }} (
            {{ slotProps.data.branch.branchCode }} )
          </template>
        </Column>
        <Column :exportable="false" header="Action">
          <template #body="slotProps">
            <span class="p-buttonset">
              <Button
                icon="pi pi-pencil"
                class="p-button-rounded p-button-success"
                @click="editIem(slotProps.data)"
              />
              <Button
                icon="pi pi-print"
                class="p-button-rounded p-button-primary"
                @click="openPreviewDialog(slotProps.data)"
              />
            </span>
          </template>
        </Column>
      </DataTable>
     
    </div>
  </section>
</template>
<script lang="ts">
import { reactive,ref } from "vue";

export default class ImportStock extends Vue {
 
  private home = { icon: "pi pi-home", to: "/" };
  private items = [
    { label: "Initialization", to: "initialization" },
    { label: "Import Stock" },
  ];

  //OPEN DIALOG TO ADD NEW ITEM
  downloadSample() {
   
        const dt = ref();
        dt.value.exportCSV();
      
  }

}
</script>

<style scoped>

</style>

[tugcekucukoglu]

When I declare this 'const dt = ref();' outside of the downloadSample method, it worked for me.