为什么 axios delete 不能按我的意愿工作，如何解决？答案

【问题标题】：Why does axios delete not work as I want, how to fix it?为什么 axios delete 不能按我的意愿工作，如何解决？
【发布时间】：2019-03-02 01:13:02
【问题描述】：

我从https://jsonplaceholder.typicode.com/posts取数据，我正常取出来了，但是我也想创建一个按钮，点击它，帖子会被删除。我写了代码，但它不起作用，你能告诉我错误是什么吗？当您单击控制台中的按钮时，会写入“删除”，但帖子仍然存在。

Screenshot of console

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

【问题讨论】：

_id vs id 我猜？
你是对的，但是当我在 id 上到处更改 _id 时，现在当我单击列表中的第二个元素时，列表的第二个元素被删除并且所有列表元素出现在第二个元素之后的元素与第一个元素一起出现，在这种情况下该怎么办？
您能用codepen 或jsfiddle 说明您的问题吗？我其实没有关注

标签： vue.js axios

【解决方案1】：

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

有两件事你必须记住。

首先，您的 post 变量是一个数组。

API 为您提供 json 数据，您要做的是将 push 该数据放入您的数组中，而不是使用 = operand

其次，splice(index) 只是返回相同的对象。

改用splice(index, 1)。

它将从该索引中删除 1 个帖子。

【讨论】：