Vuejs/Vuex How to remove(filter) an Object inside an Array of Objects in vuex state using mutations

Question

I'm try to remove an Object inside my nested(Object->Array->Objcet) vuex state.

The scenario of my application is so:

1. I will send the request to the back-end to delete a record and then return a response with just a message. Then commit to vuex stateUNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM. Everything here works fine.

    async unassignCoursandTeacher({ commit }, classroom) {
      let response = await Axios.post(
         "/dashboard/school/unassignCoursandTeacher/" + classroom.id, classroom
      );
      let cls = response.data;
      if (
         response.status == 200 ||
         response.status == 201 ||
         response.status == 204
      ) {
         commit("UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM", cls);
         return cls;
      }
    }

1. Now I want to updated singleClassroom State with the help of mutations. But it doesn't remove the delete item in State. Only if I refresh the page. below is how the mutation is setup.

   `UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {
       let cours = state.singleClassroom.courses.filter(c => c.id != cls);
       state.singleClassroom.courses = cours;
    }`
   

Here is the stricture of my data in vuex state:

Answer 1

Your logic is perfectly fine. But in one of your sentence you mentioned that "I will send the request to the back-end to delete a record and then return a response with just a message." Which means that you are not returning any data except a json message( I assume). Which means cls is empty and you are trying to filter singleClassroom State with an empty value. That will definitely will not work.

So I will suggest to set the ID of the course your trying to filter inside your ACTION. Please see the code below:

CHANGE THIS

async unassignCoursandTeacher({ commit }, classroom) {
  let response = await Axios.post(
    "/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom
  );
  let cls = response.data; // You are assigning cls to an empty attribute - this where the issue is.
  if (
     response.status == 200 ||
     response.status == 201 ||
     response.status == 204
   ) {
     commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);
     return cls;
  }
}

TO THIS

async unassignCoursandTeacher({ commit }, classroom) {
  let response = await Axios.post(
    "/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom
  );
  
  if (
     response.status == 200 ||
     response.status == 201 ||
     response.status == 204
   ) {
     let cls = classroom.yourCoursID; // Here we are assigning cls value to the cours ID.
     commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);
     return cls;
  }
}

Answer 2

I am not sure I agree with @Rodrigo. The Vuex state is reactive as data property in your components and I imagine you defined the singleClassroom data (including the courses property) in your vuex state, making it reactive. I don't believe this situation applies to the change detection caveats listed here.

I don't know what cls is, but I doubt it stands for an id. This is because you get cls from response.data. I strongly suspect cls is the course you are trying to remove and you are filtering course Id against it and they aren't of the same type. May I also suggest you use strict equality (===) as it reduces the chances of bugs.

I think the problem may be here

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {
    let cours = state.singleClassroom.courses.filter(c => c.id != cls); // if cls is the course, I think you are filtering the wrong thing
    state.singleClassroom.courses = cours;
}

Try changing to

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {
    let cours = state.singleClassroom.courses.filter(c => c.id !== cls.id);
    state.singleClassroom.courses = cours;
}

Answer 3

Try to use Vue.set( target, propertyName/index, value ) to update your object.

Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. this.myObject.newProperty = 'hi').

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {
    let cours = state.singleClassroom.courses.filter(c => c.id != cls);
    Vue.set(state.singleClassroom, 'courses', cours);
 }

https://vuejs.org/v2/api/#Vue-set