Question

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

Answer 1

您的方法很好，但是您使用的方法错误。

您必须记住两件事。

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

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

第二，splice(index)仅返回相同的对象。

改为使用splice(index, 1)。

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

为什么axios删除功能不符合我的要求，如何解决？

1 个答案: