1

Как удалить пост? Сейчас удаляет все посты почему то... Я удаляю пост по уникальному id

<div class="post" v-for="(post, i) in allPosts">
    <p>{{post.id}}</p>
    <p>{{post.title}}</p>
    <p>{{post.body}}</p>
    <button @click="deletePost(post.id)">Delete POST</button>
</div>

    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: 'Home',
        data() {
            return {
                posts: []
            }
        },
        computed: mapGetters(["allPosts"]),
        methods: {
            ...mapActions(["fetchPosts"]),
            deletePost: function (id, i) {
                fetch('https://jsonplaceholder.typicode.com/posts/' + id, {
                    method: 'DELETE'
                })
                    .then((data) => {
                        // this.posts = data
                        this.$store.state.posts = data
                        console.log('delete')
                    })
            }
        },
        async mounted() {
            this.fetchPosts()
        }
    }


  export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    updatePost(state, posts) {
      state.posts = posts
    }
  },
  actions: {
    async fetchPosts(ctx) {
      const res = await fetch(
          'https://jsonplaceholder.typicode.com/posts'
      )
      const posts = await res.json()
      ctx.commit('updatePost', posts)
    }
  },
  getters: {
    allPosts(state) {
      return state.posts
    }
  }
})
6
  • Он не "удаляет все посты", просто запрос DELETE не возвращает список постов, как вы ожидаете
    – vp_arth
    29 сен 2020 в 15:39
  • Ну и, этот бэкенд, если я правильно помню, в принципе не умеет ничего удалять) Important: resource will not be really updated on the server but it will be faked as if.
    – vp_arth
    29 сен 2020 в 15:42
  • как удалить пост ребята?)) 29 сен 2020 в 15:47
  • Ну вот код у тебя в вопросе правильный. Кроме обработки ответа)
    – vp_arth
    29 сен 2020 в 15:48
  • Тогда как сделать правильно?? 29 сен 2020 в 15:59

1 ответ 1

1

Он не "удаляет все посты", просто запрос DELETE не возвращает список постов, как вы ожидаете.

Вместо полной замены списка постов, можно отфильтровать тот, что вы удалили:

.then(() => {
    // this.posts = 
    //   this.posts.filter(p => p.id !== id)
    this.$store.state.posts = 
        this.$store.state.posts.filter(p => p.id !== id)
})

Второй вариант, более надёжный - заново выполнить запрос получения списка постов. Но тот бэкенд, чтто вы используете, не поддерживает модификацию серверных данных. Он только для простой проверки запросов.

1
  • Большое спасибо, жаль уже я сразу сделал прежде тем как Вы написали в целом я с компонента комитю, а там дальше делаю мутацию методом state.posts = state.posts.filter(item => item.id !== payload.id) 29 сен 2020 в 17:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.