JavaScript(Vue) 코드에서 객체 속성이 읽기 전용으로 표시되는 이유는 무엇입니까?

Question

저는 boxes라는 상태 변수(상자 개체를 포함하는 배열)가 있는 Vue 2 응용 프로그램을 가지고 있습니다. 이러한 상자의 하위 집합(nearest_box_linked_boxes)을 추출하는 계산된 속성이 있습니다.

nearest_box_linked_boxes에서 반환된 상자를 반복하고 각 요소의 속성 값을 변경하는 메서드가 있습니다.

for(let i=0;i<this.nearest_box_linked_boxes.length;i++)
{
  let box = this.nearest_box_linked_boxes[i];
  box.object_class = this.$store.state.selected_object_class;
  상자.패치();
}

이 메소드에서 오류가 발생했습니다:

vue.esm.js:648 [Vue 경고]: v-on 핸들러 오류: "TypeError: 다음의 읽기 전용 속성 'object_class'에 할당할 수 없습니다. 객체 '#<Box>'"

저는 상자 개체(또는 해당 속성)를 읽기 전용으로 명시적으로 설정한 적이 없습니다. nearest_box_linked_boxes(상위 배열 객체)는 계산된 속성이기 때문에 쓸 수 없다는 것을 알고 있지만 이 배열에 있는 각 요소의 속성을 수정하는 것이 가능해야 한다고 생각합니다.

Vue 및 계산된 속성으로 인해 발생한 문제인가요, 아니면 다른 문제인가요?

Answer 1

계산된 속성은 항상 "읽기 전용"으로 처리해야 합니다. 계산된 속성의 설정자는 예외입니다.

계산된 속성에서 반환된 객체를 수정하는 것은 기술적으로 가능하지만 일반적으로 이는 좋지 않은 생각입니다. 종속성이 변경되면 개체가 교체되고 변경 사항이 손실됩니다.