Vue.js에서 v-for 실행 오류 문제를 해결하는 방법

Vue.js에서 v-for 실행 오류를 해결하는 방법: 1. Vue 프레임워크 코드를 수정합니다. 2. 빈 데이터가 있는 요소에 대해 dom 노드를 생성하지 않도록 합니다. 3. 각 객체에는 고유한 ID 속성이 있습니다. [track-by] 기능을 사용하여 Vue에 힌트를 줄 수 있습니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

Vue.js에서 v-for 실행 오류를 해결하는 방법:

▲옵션 1

오류 메시지에서 Uncaught TypeError: Cannot read null의 'removeChild' 속성 이러한 문제가 발생하는 이유는 null 개체에 대해 RemoveChild가 실행되기 때문임을 알 수 있습니다. Uncaught TypeError: Cannot read property 'removeChild' of null可知，之所以发生这个问题是因为在null的对象上执行了removeChild。

修改Vue框架代码，将这里的代码：

修改为：

▲方案二

深入地分析，为什么el.parentNode会是null，通过上面重现的步骤发现，当that.model.test_arr = ["","4","","5","6",""]

Vue 프레임워크 코드를 수정하고 여기에서 코드를 변경하세요:

▲옵션 2

el.parentNode가 null이 되는 이유에 대한 심층 분석. 위의 단계를 통해 재현해 보면 .model.test_arr = ["","4","","5","6",""]이 코드 설정이 발생한 후 3개가 있다는 것을 발견했습니다. v-for에 의해 생성된 DOM 노드, Not 5. 이 경우 el.parentNode가 존재하지 않으므로 빈 데이터가 있는 요소에 대해 DOM 노드를 생성하지 않도록 강제하는 두 번째 솔루션이 생성됩니다.

▲옵션 3

문제는 만족스러운 해결책이 아닙니다. 일반적인 상황에서는 프레임워크가 강력해야 하며 다양한 사용 시나리오에 적응할 수 있어야 합니다. 심층 연구 .

Vue에는 v-for 명령에 대한 선택적 트랙바이 구성이 있습니다.

▪트랙바이 상황 없음: 데이터가 수정되면 값 수정 여부에 관계없이 DOM이 다시 렌더링됩니다.

▪트랙바이 상황이 있습니다. 데이터가 수정되면 변경되지 않은 데이터가 있는 DOM은 다시 렌더링되지 않고, 변경된 데이터가 있는 DOM은 다시 렌더링됩니다.

v-for는 기본적으로 데이터 객체의 특성을 사용하여 기존 범위 및 DOM 요소의 재사용 정도를 결정하기 때문에 이로 인해 전체 목록이 다시 렌더링될 수 있습니다. 그러나 각 객체에 고유한 ID 속성이 있는 경우 track-by 속성을 사용하여 Vue에 힌트를 제공할 수 있으므로 Vue는 기존 인스턴스를 최대한 재사용할 수 있습니다. 그래서 세 번째 해결책이 있습니다. 관련 무료 학습 권장사항:

🎜JavaScript🎜🎜🎜(동영상)🎜🎜🎜

위 내용은 Vue.js에서 v-for 실행 오류 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!