I am currently facing an issue with retrieving the id of a specific field from each row. I require this id as a parameter for a function that will be utilized in an action button to delete the row. Here is how my table template appears:
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Publications</v-toolbar-title>
<v-divider class="mx-4" inset vertical> </v-divider>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
clearable
class="shrink"
hide-details=""
></v-text-field>
<v-divider class="mx-4" inset vertical> </v-divider>
<v-btn
color="orange"
v-on:click="
changeRoute();
showEditDialog = true;
"
v-show="showAddBtn"
>{{ txtAddNew }}
</v-btn>
</v-toolbar>
</template>
<template v-slot:[`item.actions`]>
<v-btn color="primary" fab x-small elevation="2">
<v-icon>edit</v-icon>
</v-btn>
<v-btn
v-on:click="deletePublication()"
color="primary"
fab
x-small
elevation="2"
>
<v-icon>delete_forever</v-icon>
</v-btn>
</template>
</v-data-table>
</template>
This is how my headers appear (multiple headers are loaded dynamically) :
headers: [],
headersInitial: [
{
text: "Publication ID",
value: "ID",
},
{
text: "Publication Type",
value: "publicationType",
},
{
text: "Publication Name",
value: "titlePublication",
},
{
text: "Publication Year",
value: "year",
},
{
text: "Actions",
value: "actions",
sortable: false,
},
],
headersWithoutPubTypes: [
{
text: "Publication ID",
value: "ID",
},
{
text: "Publication Name",
value: "titlePublication",
},
{
text: "Publication Year",
value: "year",
},
{
text: "Actions",
value: "actions",
sortable: false,
},
],
publications: [],
filteredPublications: [],
This is how I populate my table with data:
initialize() {
this.headers = this.headersInitial;
axios.get("https://localhost:44349/api/items/GetPublications").then((pubData) => {
this.publications = pubData.data;
this.filteredPublications = pubData.data
});
},
Below is my delete function:
deletePublication() {
let ID = this.headersInitial.ID
if (confirm('Are you sure you want to delete the record?')) {
axios.get("https://localhost:44349/api/items/DeleteItem/" + ID).then((response) => {
this.publications = response.data;
this.filteredPublications = response.data
});
}
},
When attempting to delete a record, I encounter this error: "Uncaught (in promise) Error: Request failed with status code 400". How can I resolve this?