HI all,
I`d like to hear from Vue, TS masters how to send post request with api service.
Below example work fine but I've changed post method in apiservice
from
params: AxiosRequestConfig
params: any
setup() {
const params = { // just for testing - this goes from form
SalesRepresentativeId: [189],
Start: "2022-04-21",
End: "2022-04-21",
};
var transactions = reactive({});
onMounted(() => {
ApiService.post("api/dev/transactions", params)
.then(({ data }) => {
transactions = data;
console.log(transactions);
})
.catch(({ response }) => {
console.log(response.data);
});
});
return {
transactions,
};
},
Hi,
1) Yes you can send a request by updating a post method params type, an alternative solution is to wrap your data with params property.
const params = {
params: {
// your data here
}
}
Hi Lauris.
Thanks for your reply.
Two things to make vue devs happy:
1. Ability to hiding cols on mobile
2. Can I disable pagination?
Also I’ll try to find some other table components in the net. Do you know some?
:rows-per-page="tableData.length"
Great Lauris, it would be nice to have this hiding functionality.
Regarding api I've changed apiservice post method - the original way lead me to change my backend.
Can you please check my code? Backend is sending me [{acronym, documentNo, dueDate, others},{...}]
So below example dirty code show only fixed data. Is it that the backed gives me more fields than in fixed data?
setup() {
const tableHeader = ref([
{
key: "checkbox",
sortable: false,
},
{
name: "Acronym",
key: "acronym",
sortable: true,
},
{
name: "Document",
key: "documentNo",
sortable: true,
},
{
name: "Date",
key: "dueDate",
sortable: true,
},
{
name: "Actions",
key: "actions",
},
]);
let tableData = ref([
{
acronym: "John Doe",
documentNo: "wz-400",
dueDate: "2022-02-02",
},
{
acronym: "Miami Vice",
documentNo: "wz-44/sp/00",
dueDate: "2022-02-01",
},
]);
onMounted(() => {
setCurrentPageBreadcrumbs("Transaction list", ["sub", "subSub"]);
getTransactions();
});
const params = {
SalesRepresentativeId: [189, 315],
Start: "2022-04-21",
End: "2022-04-21",
};
function getTransactions(): void {
ApiService.mypost("api/dev/transactions", params)
.then(({ data }) => {
tableData = data;
})
.catch(({ response }) => {
console.log("API Request went wrong.");
});
}
return {
tableHeader,
tableData,
};
},
Hi,
If your API returns more fields than you defined in your header configuration then these fields will be ignored.
Also instead of reassign a variable
tableData = data;
tableData.value.splice(0, tableData.value.length, ... data);
Thank you Lauris.
This helped me.
table data counter: {{ tableData.length }} <!-- this shows 13 -->
<Datatable
:table-header="tableHeader"
:table-data="tableData"
:rows-per-page="tableData.length"
:enable-items-per-page-dropdown="false"
>
(...)
let tableData = ref([{}]);
If you did everything correctly then the table should render all your data.
Do you have any errors in your browser console?