Vue.js 为什么axios delete不能按我的要求工作，如何修复它？

我从中获取数据，我正常地将其取出，但我还想在单击它时创建一个按钮，该帖子将被删除。我写的代码，但它不工作，你能告诉我是什么错误？当您单击控制台中的按钮时，会写入“删除”，但帖子仍会保留

---

你的方法很好，但你用错了方法

有两件事你必须记住

首先，post变量是一个数组

API为您提供json数据，您需要做的是将该数据推送到数组中，而不是使用=操作数

其次，索引只返回相同的对象

使用索引，改为1

---

它将从该索引中删除一篇文章。

\u id vs id我猜？你是对的，但是当我在id上的任何地方更改id时，现在当我单击列表中的第二个元素时，列表中的第二个元素将被删除，并且在第二个元素之后出现的所有列表元素将与第一个元素一起保留，在这种情况下该怎么办？您能制作一个代码笔或JSFIDLE来说明您的问题是什么吗？事实上，我没有听懂

<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>