Vuejs/Vuex 돌연변이를 사용하여 vuex 상태의 개체 배열 내에서 개체를 제거하는 방법(필터링)

Vuejs/Vuex 돌연변이를 사용하여 vuex 상태의 개체 배열 내에서 개체를 제거하는 방법(필터링)

nested (Object -> Array -> Objcet) vuex 상태 내의 객체를 삭제하려고 합니다.

제 어플리케이션의 시나리오는 다음과 같습니다.

1. 백엔드로 레코드 삭제 요청을 보낸 후 메시지로 회신합니다.그런 다음 vuex 상태로 커밋합니다.UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM여기 모든 게 잘 되고 있어요

    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. 지금 업데이트 하고 싶다singleClassroom돌연변이의 도움을 받아 상태를 파악합니다.그러나 State의 삭제 항목은 삭제되지 않습니다.내가 페이지를 새로 고친다면.변환의 셋업은 다음과 같습니다.

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

vuex 상태의 데이터는 다음과 같습니다.

당신의 논리는 완벽하게 맞습니다.그러나 당신의 문장 중 하나에서 "기록 삭제 요청을 백엔드로 보낸 후 메시지만으로 회신하겠다"고 언급했습니다.즉, json 메시지 이외의 데이터는 반환하지 않습니다(내 추측).즉,cls비어 있으며 필터링을 시도하고 있습니다.singleClassroom값이 비어 있는 상태입니다.그건 절대 안 돼요.

그래서 나는 당신이 필터링하려는 코스의 ID를 당신의 안에 설정하는 것을 제안할 것입니다.ACTION아래 코드를 참조해 주세요.

이것을 변경하다

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;
  }
}

이를 위해

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;
  }
}

@Rodrigo에 동의할 수 있을지 모르겠어요.Vuex 상태는 다음과 같이 반응합니다.datavuex 상태에서 singleClassroom 데이터(코스 속성 포함)를 정의하여 반응적으로 만들었을 것입니다.이 상황은 여기에 나열된 변경 감지 경고에는 적용되지 않는다고 생각합니다.

뭔지 모른다.cls그렇긴 한데 아이디를 의미하는 건 아닌 것 같아요이것은 당신이 cls를 받기 때문입니다.response.data제 생각엔cls제거하려는 과정이며 이에 대해 과정 ID를 필터링하고 있으며 동일한 유형이 아닙니다.버그가 발생할 가능성을 줄이기 위해 엄격한 균등화(===)를 사용하는 것도 추천합니다.

문제는 여기에 있는 것 같다

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;
}

로 변경해 보겠습니다.

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

사용해보십시오.Vue.set( target, propertyName/index, value )개체를 업데이트합니다.

반응형 개체에 속성을 추가하여 새 속성도 반응형인지 확인하므로 뷰 업데이트를 트리거합니다.Vue가 정상적인 속성 추가(예: 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

언급URL : https://stackoverflow.com/questions/63061741/vuejs-vuex-how-to-removefilter-an-object-inside-an-array-of-objects-in-vuex-st