如何从VUEJS中的V-DATA-Table返回一行的ID

Question

我目前正在努力从每行返回特定字段的ID。我需要此ID将其用作将在操作按钮中用于删除行的函数的参数。 这就是我的表模板的样子：

       <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>

这就是我的标题的外观（我的标题是动态加载的，这就是为什么我有一个以上的原因）：

    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: [],

这就是我将数据放入表中的方式：

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

这是我的删除功能：

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
        });
      }
    },

每当我尝试删除记录时，都会发生此错误：“未被识别（有望）错误：状态代码400的请求失败”。我该如何使其工作？

Answer 1

let ID =  this.headersInitial.ID

this.headersitial是一个数组 - 它没有属性id

您的deletePublication（）方法需要接收行ID作为参数（因为可以将不同的行调用为具有不同ID的不同行），

这就是为什么Vuetify将实际行传递到item插槽中的原因。替换v-slot：item.actiuni v-slot：item.actiuni =“ {item}”，如示例。 item是对象（当前行），您可以在处理程序中使用它为v-on：click =“ deletePublication（item.ID）