CODEWITHSUNDEEP
node.jsvue.jsvuejs2
Vin
Vin

Reputation: 169

How to use Axios Delete in VueJs?

Why my delete function is not working in VueJS? I have a table that displays the data from NodeJS and renders to VueJS

<tr v-for="result in filteredPeople" :key="result.id">
          <td>{{result.Memb_ID}}</td>
          //other data

          <div class="btn">
            <button class="btn btn-success">Edit Details</button>
            <b-button class="btn btn-danger" @click="deleteData(result.Memb_ID)">Delete</b-button>
          </div>

and my delete data is shown below.

deleteData(result, Memb_ID) {
  axios
    .delete("localhost:9000/api/delete/user/" + result.Memb_ID)
    .then(response => {
      this.result.splice(Memb_ID, 1);
      console.log(this.result);
    });
},

On my server console

DELETE /api/delete/user/undefined 404 167 - 0.184 ms

This is my image of backend image 2

I never posted all the code but if you want I'll post it. Thanks for the help!

EDIT I added image of my backend.

EDIT 2 I updated the server image.

Upvotes: 2

Views: 7934

Answers (2)

Jairo Malanay
Jairo Malanay

Reputation: 1347

It is because you are passing your memId via req.params but in your backend you are using req.query.memId

you can adjust it by:

  1. update your axios to use localhost:9000/api/delete/user?Memb_ID=${Memb_ID}
  2. or update your backend route to router.delete('/delete/user/:Memb_ID')

Upvotes: 3

&#223;iansor &#197;. &#197;lmerol
&#223;iansor &#197;. &#197;lmerol

Reputation: 3109

Your deleteData function parameter is only one. Could you try this.

deleteData(memId) {
  axios
    .delete("localhost:9000/api/delete/user/" + memId)
    .then(response => {
      this.result.splice(memId, 1);
      console.log(this.result);
    });
},

Upvotes: 2

Related Questions