I need to use different GET requests to display in my Datatable. Both come from different tables of the Database using different requests. I'm lost of what i have to do to make this work. I know i'm using different values in the :value of the Datatable. The values that i want to show is the Package and Page.
<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
});
}
});
},
I tried to use the same :value for the GET requests, but it did not worked. It shows the first value that is loaded in the mounted. If loads getAll first, it show the values, but if loads getPackage, it shows the package values.
I managed to solve it, this is how i made to show the data i wanted
<Column field="name" header="Package" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
<div v-for="item in operationPackage">
<div v-if="slotProps.data.name === item.id">
{{ item.name }}
</div>
</div>
</template>
</Column>
<Column field="file_name" header="Page" headerClass="headerClass" bodyClass="bodyClass" :sortable="true"
filterMatchMode="contains">
<template #body="slotProps">
<div v-for="item in operationPage">
<div v-if="slotProps.data.file_name === item.id">
{{ item.file_name }}
</div>
</div>
</template>
</Column>