如何使我的删除条目按钮起作用

Question

请原谅我的新手，因为我是编码新手。我一直试图让我的删除按钮在我的网页和 mysql 上都可以使用，但我的删除按钮只是将我带到一个 url /删除页面。我没有收到任何错误，但我的确认删除按钮不会删除条目，而是将我带到另一个空白页面。如果有任何建议可以幸免，将不胜感激。这是一些代码，如果需要更多，请告诉我。再次感谢。

<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>
import axios from "axios";

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

这是在我的 index.js 中

 async deleteServiceEntry() {
      return new Promise((resolve, reject) => {
        axios({
          method: "delete",
          url:
            prefix +
            "/api/service/delete/",
          headers: { "Content-Type": "application/json" }
        })
          .then(function(response) {
            //handle success
            console.log(response);
            resolve(true);
          })
          .catch(function(response) {
            //handle error
            console.log(response);
            reject(false);
          });
      });
  },

这是在我的 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.delete("/api/service/:id", (req, res) => {
  pool.query(
    "DELETE FROM `master` WHERE id= ? AND location = ? AND end_user = ? AND order_number = ? AND date = ? AND application = ? AND service_tech = ? AND department = ? AND hours = ? And travel_hours = ? AND contact_name = ? AND reason = ?",
    [req.params.id, req.params.location, req.params.end_user, req.params.order_number, req.params.date, req.params.application, req.params.service_tech, req.params.department, req.params.hours, req.params.travel_hours, req.params.contact_name, req.params.reason],
    function (error, results, fields) {
      if (error) res.json(error);
      else res.json(results);
    }
  );
});

Answer 1

由于锚标记中的 href 链接，它正在重定向到新页面。您应该在单击时调用方法 deleteServiceEntry，它应该可以正常工作。你可以做的是：

              <a
                href="#"
                type="button"
                class="btn btn-light btn-small"
                @click="deleteServiceEntry($event,row.id)"
                ><i class="bi bi-trash"></i> Delete</a
              >

然后在方法中：

 async deleteServiceEntry(event,id) {
  event.preventDefault();
  const verify = confirm("Are you sure you want to delete this entry?");
  if (verify) {
   return new Promise((resolve, reject) => {
    axios({
      method: "delete",
      url:
        prefix +
        "/api/service/delete/"+id,
      headers: { "Content-Type": "application/json" }
    })
      .then(function(response) {
        //handle success
        console.log(response);
        resolve(true);
      })
      .catch(function(response) {
        //handle error
        console.log(response);
        reject(false);
      });
  });

}, }

希望这对您有所帮助。