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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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