filterModel-undefined, datatable.vue?bf16:54 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

UI Components for Vue
Post Reply
Herald
Posts: 6
Joined: 07 Apr 2021, 08:03

09 Apr 2021, 16:43

Hi there,
I am implementing table using dynamic column. filterModel is coming undefined in template #filter while trying to search in column wise filters. Global Filtering is wrkng fine.

Here is my code,
<DataTable v-bind:value="allTableData" ref="dt" v-model:selection="selectedProducts3" dataKey="id" class="p-datatable-sm"
v-model:resizableColumns="ToggleView" showGridlines stripedRows removableSort columnResizeMode="expand"
:reorderableColumns="true" :loading="loading"
responsiveLayout="scroll" scrollHeight="400px" scrollDirection="both"
v-model:filters="filters1" filterDisplay="row" :globalFilterFields='["*Here, I am giving the list of column fields*"]'
:paginator="true" :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10,20,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}">
<template #header>
<div class="p-d-flex p-jc-between">
<div style="text-align: left">
<MultiSelect class="p-mr-2" :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
placeholder="Select Columns" style="width: 20em"/>
<Button icon="pi pi-external-link" class="p-button-rounded p-mr-2" label="Export" @click="exportCSV($event)" />
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined p-button-rounded p-mr-2" @click="clearFilter1()"/>
<ToggleButton class="p-button-rounded p-mr-2" v-model="ToggleView" onLabel="Comfortable" offLabel="Compact" style="width: 12rem" />
</div>
<div style="text-align:left">
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
</span>
</div>
</div>
</template>
<template #empty>
<span>No Records found.</span>
</template>
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="" header="Action" footer="Action">
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
</template>
</Column>
<Column v-for="(col, index) of selectedColumns" :filterField="col.field" :showFilterMenu="false" :field="col.field" :header="col.header" :footer="col.header" :key="col.field + '_' + index" sortable>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-bind:placeholder="'Search by '+ col.header" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>

</Column>
</DataTable>
<script>

export default {
methods: {
clearFilter1() {
this.initFilters1();
},
initFilters1() {
this.filters1 = {
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
*Here goes my columns-These are similar to global format as above*
}
}
},
data() {
return {
filters1: null,
}
},
created() {
this.initFilters1();
}
}
</script>

Herald
Posts: 6
Joined: 07 Apr 2021, 08:03

09 Apr 2021, 19:00

I resolved this issue after seeing this post viewtopic.php?f=110&t=64361

tugce.kucukoglu
Posts: 78
Joined: 23 Oct 2020, 09:28

21 Apr 2021, 09:18

Hi,

If the problem persists, please attach a codesandbox link for us to replicate.

Best Regards,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: Baidu [Spider] and 2 guests