如何在 VueJs 中 return 来自 v-data-table 的行的 id

Question

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

       <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 的样子（我的 headers 是动态加载的，这就是为什么我有多个）：

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

这就是我将数据输入 table 的方式：

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.headersInitial 是一个数组 - 它没有属性 ID

您的 deletePublication() 方法需要接收行的 ID 作为参数（因为它可以针对不同的行始终使用不同的 ID 调用）

这就是 Vuetify 将实际行作为 prop 传递到 item 槽中的原因。将 v-slot:item.actiuni 替换为 v-slot:item.actiuni="{ item }"，如 example 中所示。 item 是对象（当前行），您可以在处理程序中将其用作 v-on:click="deletePublication(item.ID)

如何在 VueJs 中 return 来自 v-data-table 的行的 id

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

javascript

vue.js

vuetify-datatable