[Vuejs]-Nuxtjs/Vuejs/Laravel 5.7 API : Component reactive after action/mutation

by

0👍

When your are adding or deleting properties of a reactive object, you have to make sure the view updates accordingly. So I think you have to use Vue.delete and Vue.set properties. Please refer https://v2.vuejs.org/v2/api/#Vue-delete and https://v2.vuejs.org/v2/api/#Vue-set

When you are deleting a post from a posts list, your posts list view should be updated accordingly

Edit your DELETE_POST mutation as follows,

DELETE_POST(state, post) {
    const index = state.posts.findIndex(item => item.id === post.id)
    
    if (index > -1) {
        Vue.delete(state.posts, index);
    }
  }

Also when you are updating a property of a post do your mutation as follows,

UPDATE_POST(state, updatedPost) {

    let index = state.posts.findIndex(post => post.id === updatedPost.id);

    if (index > -1) {
           Vue.set(state.posts, index, updatedPost)
    }
 },

Leave a comment