[Vuejs]-List items are removed from bottom to top but not from top to bottom

by

-1👍

✅

This id here is actually the index, not really the post.id, whereas splice() takes a start index, see the signature here:

<li v-for="(post, id) of posts">
<!----------------^^--- This is essentially posts[index] -->

So try doing the following instead:

<template>
  <div id="app">
    <ul>
      <li v-for="(post, index) of posts">
        <p>{{ post.title }}</p>
        <p>{{ post.body }}</p>
        <button @click="deleteData(index, post.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

methods: {
  deleteData(index, id) {
    axios
      .delete('http://jsonplaceholder.typicode.com/posts/' + id)
      .then(response => {
        this.posts.splice(index, 1);
      })
      .catch(function (error) {
        console.log(error)
      })
  },
}

Leave a comment