How to return id of a row from v-data-table in VueJs

Question

I'm currently struggling with returning the id of a specific field from each row. I need this id to use it as a parameter for a function that will be used in an action button to delete the row. This is how my table template is looking like:

       <template v-slot:top>
            <v-toolbar flat>
              <v-toolbar-title>Publicații</v-toolbar-title>
              <v-divider class="mx-4" inset vertical> </v-divider>
              <v-text-field
                v-model="search"
                append-icon="mdi-magnify"
                label="Caută"
                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();
                  arataDialogEditare = true;
                "
                v-show="arataBtnAdaugare"
                >{{ txtBtnAdaugaNou }}
              </v-btn>
            </v-toolbar>
          </template>
          <template v-slot:[`item.actiuni`]>
            <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 are looking like (my headers is dynamically loaded, that's why I have more than one) :

    headers: [],
    headersInitial: [
      {
        text: "Id publicatie",
        value: "ID",
      },
      {
        text: "Tip publicație",
        value: "tipPublicatie",
      },
      {
        text: "Nume publicație",
        value: "titluPublicatie",
      },

      {
        text: "An publicație",
        value: "an",
      },
      {
        text: "Actions",
        value: "actions",
        sortable: false,
      },
    ],
    headersFaraTipPublicatii: [
      {
        text: "Id publicatie",
        value: "ID",
      },
      {
        text: "Nume publicație",
        value: "titluPublicatie",
      },

      {
        text: "An publicație",
        value: "an",
      },
      {
        text: "Actions",
        value: "actions",
        sortable: false,
      },
    ],
    publicatii: [],
    publicatiiCuFiltru: [],

This is how I get my data into the table:

initialize() {
      this.headers = this.headersInitial;
      axios.get("https://localhost:44349/api/items/ReturnarePublicatii").then((returnPub) => {
        this.publicatii = returnPub.data;
        this.publicatiiCuFiltru = returnPub.data
      });
    },

Here 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/StergereItem/" + ID).then((returnPub) => {
        this.publicatii = returnPub.data;
        this.publicatiiCuFiltru = returnPub.data
        });
      }
    },

Whenever I try to delete a record, this error occurs: "Uncaught (in promise) Error: Request failed with status code 400". How can I make it work?

Answer 1

let ID =  this.headersInitial.ID

this.headersInitial is an array - it has no property ID

Your deletePublication() method needs to receive the id of the row as a parameter (because it can be called for different rows always with different id)

That's why Vuetify passes the actual row into a item slot as a prop. Replace v-slot:item.actiuni with v-slot:item.actiuni="{ item }" as shown in the example. The item is the object (current row) and you can use it in your handler as v-on:click="deletePublication(item.ID)