javascript - Vue는 배열 요소를 삭제하여 나머지 요소가 다시 렌더링되지 않도록 합니다.

Question

최근 프로젝트에서 Vue를 사용했는데 개발 과정에서 배열에서 요소를 삭제할 때 요소 뒤에 있는 요소가 다시 렌더링되지 않는다는 것을 발견했습니다.

html 코드는 다음과 같습니다.
두 가지 구성 요소가 있습니다. 하나는 모든 콘텐츠 컨테이너를 포함하는 데 사용되는 기본 구성 요소이고, 다른 하나는 콘텐츠를 표시하는 데 사용되는 하위 구성 요소입니다.

js 코드는 다음과 같습니다:

그리고 Vuex 매장도 있습니다:

일반적으로 하위 컨테이너를 삭제할 때 Vue에서 재정의된 배열 방식인 splice를 직접 사용하여 삭제할 수 있어야 합니다.
예:

으아악

그런데 사용해보니 요소를 삭제한 후 이 요소 뒤에 있는 요소가 다시 로드되고 다시 렌더링되지 않고, 페이지의 vue 로직이 정상적으로 실행되지 않는 것을 발견했습니다.

다양한 방법을 시도한 후에도 여전히 해결 방법이 없습니다. 요소가 삭제되면 후속 요소의 첨자가 변경되어 요소의 콘텐츠가 다시 로드되지만 렌더링되지 않는 것 같습니다.

그래서 저의 최종 해결책은 위 이미지처럼 요소를 직접 삭제하는 것이 아니라 사용하는 것이었습니다

state.Content.splice(i,1,null);

메서드는 배열의 배열을 변경하지 않고 배열의 요소를 비워 두어 궁극적으로 문제를 해결합니다.
하지만 이 솔루션은 증상만 치료할 수 있을 뿐 근본 원인을 치료할 수는 없으며, 제 질문에 대한 답변도 잘 해드릴 수 없습니다.
그래서 전문가 여러분께 묻고 싶습니다. 더 좋은 해결 방법은 없을까요?

Answer 1

배열을 복제하려고 시도한 다음 이 배열에서 작업한 후 이 배열을 이전 배열에 할당하면 Vue가 다시 렌더링됩니다.

PS: 그런데 Vue가 다시 렌더링할지 여부는 종속 데이터가 변경되었는지 여부에 따라 달라집니다. 따라서 일반적인 방법을 사용하여 참조 유형 데이터(Array, Object...)를 추가하거나 삭제하는 경우 Vue는 그렇지 않을 수 있습니다. 데이터의 변화가 감지되면 위에서 언급한 단순하고 거친 방법을 사용하거나 Vue에서 제공하는 this.$set... 과 같은 방법을 사용하세요.

Answer 2

삭제할 때 state.Content를 다시 할당해 볼 수 있습니다
보통 이렇게 합니다
state.content = state.content.map( e=> {

으아악

})