列表项从下至上删除,但从上至下删除

时间:2019-03-02 13:45:17

标签: javascript vue.js axios splice

我列出了链接上的所有项目。在每个元素附近,都有一个要单击的删除按钮,应将其从站点和api中删除。事实是,当我单击“删除”按钮时,从api和网站上的所有内容都是正常的,如果您从下至上删除元素,这是正常的,并且如果从上至下删除元素,则无法正常工作。我知道这是在splice参数中,但是我不知道如何解决它。

Screenshot of list

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

1 个答案:

答案 0 :(得分:-1)

这里的id实际上是索引,而不是post.id,而splice()则是起始索引,请参见签名here

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

因此,请尝试执行以下操作:

<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)
      })
  },
}