배열, 구성 가능한 API에 객체 푸시

Question

프로젝트가 있습니다. "크기"(대형, 소형) 및 수량(2/4/6)의 두 가지 선택 옵션이 있습니다.

각 옵션을 선택하면 제목에 선택 항목이 표시되어야 합니다(작은 및 4라고 가정). "스토리지에 추가" 버튼을 클릭하면 스토리지에 추가되며 다른 페이지에 목록이 표시됩니다.

내가 시도한 것:

vue TS:

으아악

템플릿:

으아악

첫 번째 개체를 나중에 추가하면 첫 번째 개체를 덮어쓰게 되는 이유는 무엇인가요?

Answer 1

machineInfo.value推入数组中保留对原始对象的引用。您刚刚进行了浅拷贝。对machineInfo.value 업데이트로 인해 배열의 값도 업데이트됩니다. 푸시하기 전에 깊은 복사본을 만들어야 합니다.

으아악

전체 복사를 수행하는 데는 다른 많은 방법이 있으며, 데이터에 따라 더 적합한 한 가지 방법이 있을 수 있습니다.