Vue 프로젝트에서 발생한 문제: DOMException

Question

vue를 사용하여 프로젝트를 수행할 때 예외가 발생합니다.
DOMException: 'Node'에서 'insertBefore'를 실행하지 못했습니다. 새 노드가 삽입되기 전의 노드가 이 노드의 하위 노드가 아닙니다.

설명: 이 문제는 이전에 온라인에서 검색된 적이 있는데, v-if 및 v-show와 관련된 많은 참고자료에서 볼 수 있지만, 상세하고 합리적인 설명과 해결책이 제공되지 않았습니다. 여기에 질문이 있습니다. 문제를 겪은 동료 도교인들이 설명을 해주기를 바랍니다.

Answer 1

정보 검색 후 :
https://github.com/vuejs/vue-...
https://github.com/vuejs/vue/...
위 링크를 참고하시면 됩니다.

Dom 페이지가 렌더링되지 않은 경우 http 요청에서 반환된 데이터가 알 수 없는 노드에 삽입되어 이 오류가 발생하는 것으로 추측됩니다.

시나리오: 서버에서 데이터를 요청하고, vnode를 업데이트하고, 렌더링 결과를 업데이트하려면 버튼을 클릭하세요.
해결책: 렌더링해야 하는 템플릿의 외부 레이어에<p v-if="isShow"><p v-for=""></p></p>를 추가하세요. , 버튼을 클릭하면 시작됩니다. 데이터를 요청하는 경우 @click="isShow=false"입니다. 데이터를 성공적으로 요청하는 경우 콜백 함수에서 cb(isShow=ture)를 확인하고 데이터를 업데이트할 때 먼저 제거한 다음*를 삽입하세요.