Почему удаление axios не работает так, как я хочу, как это исправить?

Question

Я взял данные из https://jsonplaceholder.typicode.com/posts, Я получил их нормально, но я также хочу создать кнопку, когда я нажимаю на нее, сообщение будет удалено.Я написал код, но он не работает, вы можете сказать мне, в чем ошибка?При нажатии на кнопку в консоли пишет «удалить», но сообщение остается.

Снимок экрана консоли

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

<script>
import axios from 'axios';

export default {
  name: 'app',
  data () {
    return{
      posts: [],
    }
  },

    created(){
      axios.get('http://jsonplaceholder.typicode.com/posts').then(response => {
        this.posts = response.data
      })
    },
    methods: {
        deleteData(_id) {
          axios.delete('http://jsonplaceholder.typicode.com/posts/' + id)
                    .then(response => {
                      console.log('delete')
                        this.posts.splice(
                          this.posts.findIndex(e => e.id === id)
                        )
                      })
                    .catch(function(error) {
                        console.log(error)
                    })
                  },
                }
              }
</script>

Answer 1

Ваш подход хорош, но вы используете методы неправильно.

Есть две вещи, которые вы должны запомнить.

Во-первых, ваша переменная post является массивом.

API предоставляет вам данные json, и вам нужно push добавить эти данные в ваш массив вместо использования = operand

Во-вторых,splice(index) просто возвращает тот же объект.

Использование взамен splice(index, 1).

Он удалит 1 запись из этого индекса.