I am facing a challenge where I need to use different GET requests to populate my Datatable with data from separate tables in the Database. Despite trying different approaches, I am unable to figure out how to make this work successfully. I have realized that I am using distinct values in the :value attribute of the Datatable component. The crucial information that I aim to display includes the Package and Page details.
<DataTable :value="gridData" :paginator="true" :rows="50" :rowHover="true" :loading="loading" @page="scrollUp()"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[15,25,50]" :autoLayout="true"
selectionMode="single" dataKey="id"
currentPageReportTemplate="Mostrando {first} até {last} de {totalRecords} Registros"
:filters="filters"
class="p-datatable-customers p-datatable p-component p-datatable-hoverable-rows"
@row-select="onRowSelect">
<div class="p-datatable-header">
<div class="table-header">
Orgs
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<InputText v-model="filters['global']" placeholder="Global Search"/>
<Button label="Novo" icon="pi pi-plus" iconPos="right" @click="goToNew"/>
</span>
</div>
</div>
<template #empty>
Empty
</template>
<template #loading>
load
</template>
<Column field="name" header="Name" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
{{slotProps.data.name}}
</template>
</Column>
<Column field="trade_name" header="Trade" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
{{ slotProps.data.trade_name }}
</template>
</Column>
<Column field="created_date" header="Date" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
{{ dateHourFormat(slotProps.data.created_date) }}
</template>
</Column>
<Column field="name" header="Package" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
{{ slotProps.data.name }}
</template>
</Column>
<Column field="file_name" header="Page" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
{{ slotProps.data.file_name }}
</template>
</Column>
</DataTable>
getAll() {
this.customerService.getAll()
.then((response) => {
this.gridData = response;
}).catch((error) => {
console.log(error);
})
},
getPackage() {
this.operationPackage = []
this.operationPackageService.getAllOperationPackages()
.then((response) => {
this.operationPackage = response;
}).catch((error) => {
if (error.response && error.response.data && error.response.data.details) {
this.$toast.add({
severity: 'error',
summary: error.response.data.details,
life: 5000
});
} else {
this.$toast.add({
severity: 'error',
summary: 'N',
life: 5000
});
}
});
},
getPage() {
this.operationPage = []
this.operationPackageService.getAllHtmlFiles()
.then((response) => {
this.operationPage = response;
}).catch((error) => {
if (error.response && error.response.data && error.response.data.details) {
this.$toast.add({
severity: 'error',
summary: error.response.data.details,
life: 5000
});
} else {
this.$toast.add({
severity: 'error',
summary: 'N',
life: 5000
});
}
});
},
My attempts to use the same value for multiple GET requests have been unsuccessful as it only displays the first loaded value when mounted. If the getAll request loads first, it shows those values but changes when the getPackage request is loaded.