如何让我的删除功能在 Vue JS 中工作？

Question

我正在开发一个网站，但遇到了一些问题。我对编码很陌生，所以请原谅我的新手，但我很难创建一个功能性的删除用户按钮。当我单击删除时，它会将我带到删除 url，但不会从我的主表或 mysql 数据库中删除。如果有任何建议可以幸免，将不胜感激。这是应该与问题相关的代码。

主页表；

<template>
  <div class="between:flex bottom:margin-3">
    <div class="center: flex-items">
      <span class="right:margin-1">Show</span>
      <select v-model="currentEntries" class="select" @change="paginateEntry">
        <option v-for="se in showEntries" :key="se" :value="se">
          {{ se }}
        </option>
      </select>
      <span class="left:margin-1">Entries</span>
      <div class="end:flex"></div>
    </div>
  </div>
  <div id="tableHolderDiv">
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Location</th>
          <th scope="col">End User</th>
          <th scope="col">Order Number</th>
          <th scope="col">Date</th>
          <th scope="col">Application</th>
          <th scope="col">Service Tech</th>
          <th scope="col">Department</th>
          <th scope="col">Hours</th>
          <th scope="col">Travel Hours</th>
          <th scope="col">Contact Name</th>
          <th scope="col">Reason</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="row in serviceEntries"
          :key="row.id"
          @click="alertID(row.id)"
        >
          <th scope="row">{{ row.id }}</th>
          <td>{{ row.location }}</td>
          <td>{{ row.end_user }}</td>
          <td>{{ row.order_number }}</td>
          <td>{{ row.date }}</td>
          <td>{{ row.application }}</td>
          <td>{{ row.service_tech }}</td>
          <td>{{ row.department }}</td>
          <td>{{ row.hours }}</td>
          <td>{{ row.travel_hours }}</td>
          <td>{{ row.contact_name }}</td>
          <td>{{ row.reason }}</td>
          <a
            href="/delete/{{this.id}}"
            type="button"
            class="btn btn-light btn-small"
            onclick="event.stopPropagation(); return confirm('Are you sure you want to delete this entry?');"
            ><i class="bi bi-trash"></i> Delete</a
          >
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "ServiceTable",
  computed: {
    serviceEntries() {
      return this.$store.state.serviceEntries;
       
    },
  },
  methods: {
    alertID(id) {
      this.$router.push({
        path: `/modify/${id}`,
      });
    },
  },
};
</script> 

唯一的删除调用；在我的 app.js 中

app.delete("/api/service/:id", (req, res) => {
  // console.log("DELETE /api/user/" + req.params.id + " called");
  pool.query(
    "DELETE FROM `master` WHERE id = ?",
    [req.params.id],
    function (error, results, fields) {
      if (error) res.json(error);
      else res.json(results);
    }
  );
});

我可能需要添加一个 app.post 以进行删除吗？

Answer 1

a 标签正在使用 GET-request，您需要 DELETE-request。使用button 和一个处理程序，您可以在其中使用诸如axios 或got 之类的包来发出此类请求（以及其他GET、POST、PUT）。

<button
  class="btn btn-light btn-small"
  onclick="onDelete">
  <i class="bi bi-trash"></i>
  Delete
</button>

<script>
import axios from 'axios';

export default {
  methods: {
    async onDelete() {
      if(!confirm('Are you sure you want to delete this entry?') {
        return
      }
      await axios.delete(`/delete/${this.id}`);
    },
    alertID(id) {
      this.$router.push({
        path: `/modify/${id}`,
      });
    },
  },
};
</script>