Javascript 列表项是从下到上删除的，但不是从上到下删除的

我列出了链接上的项目列表。在每个元素附近都有一个按钮，单击该按钮时可以删除该元素，该元素应从站点和api中删除。事实上，当我单击delete按钮时，api和站点中的所有内容都是正常的，如果从下到上删除元素，则是正常的，如果从上到下，则无法正常工作。我知道问题在于拼接参数，但我不知道如何解决它

{{post.title}}

{{post.body}}

删除


从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
员额：[]，
}
},
创建（）{
axios.get（）http://jsonplaceholder.typicode.com/posts）。然后（响应=>{
this.posts=response.data
})
},
方法：{
删除数据（id）{
axios.delete（'http://jsonplaceholder.typicode.com/posts/“+id）
。然后（响应=>{
console.log（'delete'）
本支柱拼接（id-1，1）
})
.catch（函数（错误）{
console.log（错误）
})
},
}
}

这个

id

这里实际上是索引，而不是真正的

post.id

，而以索引开始，请参见签名：

因此，请尝试执行以下操作：

{{post.title}}

{{post.body}}

删除

方法：{
删除数据（索引，id）{
axios
.删除（'http://jsonplaceholder.typicode.com/posts/“+id）
。然后（响应=>{
此柱拼接（索引，1）；
})
.catch（函数（错误）{
console.log（错误）
})
},
}

删除帖子后，应立即重新获取帖子。您的索引在您所称的“站点”和上面提供的代码中的api之间变得不同步。您能告诉我如何做到这一点吗？删除帖子的更好方法是手动获取索引（例如使用

findIndex

），而不是尝试用id:Replace:

this.posts.splice（id-1,1）链接索引

与

this.created（），完成。
<template>
  <div id="app">
    <ul>
      <li v-for="(post, id) 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(id-1, 1)
                      })
                    .catch(function(error) {
                        console.log(error)
                    })
                  },
                }
              }
</script>