[Vuejs]-How can I make my Delete Entry Button Functional

by

0👍

It is redirecting to a new page because of the href link in the anchor tag. You should call the method deleteServiceEntry on the click and it should work fine. What you can do is:

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

Then in the method:

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

},
}

Hope this was helpful.

Leave a comment