[Vue warn] :nextTick 오류: "NotFoundError: '노드'에서 'insertBefore'를 실행하지 못했습니다.

[Vue warn] :nextTick 오류: "NotFoundError: '노드'에서 'insertBefore'를 실행하지 못했습니다.

Vue 웹 앱에서 다음과 같은 오류 메시지가 가끔 표시되지만, 이 오류가 발생하면 앱이 완전히 중지됩니다.

오류 메시지 1:

[Vue warn] :nextTick 오류: "NotFoundError: 'Node'에서 'insertBefore'를 실행하지 못했습니다.새 노드를 삽입할 노드가 이 노드의 하위 노드가 아닙니다."

오류 메시지 2:

DOMException:'노드'에서 'insertBefore'를 실행하지 못했습니다.새 노드를 삽입할 노드가 이 노드의 하위 노드가 아닙니다.

오류 메시지 1의 스택트레이스택 트레이스

오류 메시지 2: 스택트레이스택 트레이스

스택 트레이스를 기반으로 대시보드컴포넌트의 setListingFromCoords() 메서드가 문제의 원인임을 특정했습니다.또한 "data"가 올바른 정보로 console.log되어 있으므로 vuex "getListingsFromCoords" 작업에 문제가 없습니다.또한 data.results도 올바르게 입력되고 있습니다.스택 트레이스에 따른 문제는 에 있습니다.

대시보드 컴포넌트에 있는 setListingFromCoords() 메서드는 다음과 같습니다.

setListingFromCoords() {
    return new Promise((resolve, reject) => {
        this.$store.dispatch(
            "getListingsFromCoords"
        ).then((data) => {
            console.log(data); // "data" is returned correctly here
            this.listings = data.results; // CODE BREAKS HERE
            this.previous = data.previous;
            this.hasPrevious = data.hasPrevious;
            this.next = data.next;
            this.hasNext = data.hasNext;
            resolve();
        }).catch((err) => {
            reject(err);
        });
    });
},

대시보드 컴포넌트의 템플릿 부분에는 위의 setListingFromCoords 메서드에서 반환된 목록 수에 따라 v-fored되는 다음과 같은 카드 컴포넌트가 있습니다. that this this this음음음음음 this this음음 。listings이 부분이 Vue가 오류를 발생시킨 원인이라는 생각이 듭니다.

<card
    v-for="(listing, index) in listings"
    v-bind:index="index"
    v-bind:key="listing._id">
</card>

제 결론이 사실 타당한지/맞는지 확인해 주실 수 있나요?또한 이 문제를 해결하기 위해 코드를 수정하려면 어떻게 해야 하며, 왜 이 오류가 발생합니까?

★★★★★★★★★★★★★에서도 같은 문제가 있었습니다.vue-router가 포장하고 이 판명되었다<router-view />에 inside inside inside vue-fragment.

편집

이 문제는 vue-fragment v1.5.2에서 처음 발생했습니다. 패키지를 v1.5.1로 다운그레이드합니다.

@에서 설명한 바와 @jai-kumaresh를 합니다.^sonson jjjjjjjjjj."vue-fragment": "^1.5.1"은은 npm 【npm】

2021년 10월 편집

vue-fragmentVue 3을 사용하는 경우 패키지가 더 이상 필요하지 않으므로 루트 요소에 여러 요소를 직접 추가할 수 있습니다.주제에 대한 자세한 내용은 Vue3 가이드의 fragments 섹션을 참조하십시오.

다음은 VueJS의 핵심 팀원 @LinusBorg의 설명입니다.

오류 메시지 자체는 Vue가 다른 요소보다 먼저 요소를 삽입하려고 했지만 해당 요소가 더 이상 DOM에 존재하지 않는 DOM 예외입니다.

당신이 제공한 정보와 함께 Vue가 이전에 v-for-에 의해 작성된 다른 요소보다 먼저 요소를 삽입하려고 한다고 가정합니다. 즉, Vue는 기존 요소 목록에 변경 사항을 반영하기 위해 필요하다고 생각하는 요소를 패치하려고 시도하지만 실패합니다.

이 에러의 직접적인 원인은 알 수 없습니다만, 중복 리스트가 있는 것은 아닐까 하는 의구심이 듭니다._id?

그의 의심은 옳았다.대시보드 구성 요소에 중복 키가 있어서 오류가 발생했습니다.

Vue Slik 슬라이더에서도 비슷한 문제가 있었습니다.제 경우 솔루션은v-if컴포넌트 주위에 있는 명령어v-show지시.처음에 나는 또한 제거했다.:key슬라이드를 생성하던 루프에서 다시 키를 사용할 수 있게 되었습니다.

저도 같은 문제가 있었어요.

참가자:나만의 프로파일 폼 컴포넌트 + youtube 컴포넌트

<youtube
    v-if="profileData.showYoutube && profileData.youtubeUrl"
    :video-id="$youtube.getIdFromUrl(profileData.youtubeUrl)"
/>

문제:로드된 youtube 컴포넌트가 있는 일부 프로파일을 볼 경우 "프로파일 만들기"를 클릭하면 사용자가 리디렉션됩니다.vue-router부터site.com/some_profile_name로.site.com/create_profile추가 절차로profileData(사용자가 새로운 프로파일을 작성하려고 하기 때문에...)가 클리닝 됩니다.

이 경우 두 컴포넌트는 모두 재사용되지만youtube어떤 이유 때문인지profileData클리닝이 문제의 원인입니다.[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

솔루션:포장해서 고칠 수 있었다.youtube에 의해 구성 요소<div>(<template>에러도 발생합니다).

<div v-if="profileData.showYoutube && profileData.youtubeUrl">
    <youtube :video-id="$youtube.getIdFromUrl(profileData.youtubeUrl)"/>
</div>

이 에러는, 사용시에 발생하고 있습니다.<template>v-if가 있는 요소.

로 변환하면<div>대신 고쳐진 것 같았어

HTML을 조금 낭비하게 되었지만 문제는 해결되었습니다.

1. vue-fragment 버전 1.52에서 버전 1.51로 다운그레이드하고 버전에 ^을 추가하지 마십시오. 버그가 버전 1.52에 있으므로 현재 버전 1.51로 유지됩니다.

2. 이 문제가 해결되지 않으면 fragment 태그를 삭제해 보십시오.

따라서 다음과 같은 경우:

<template>
   <fragment><router-view></router-view></fragment>
</template>

그냥 넣으세요:

<template>
    <router-view></router-view> 
</template>

또는 이 라우터 뷰를 다른 html 태그로 랩할 수 있지만

내부에 존재하는 컴포넌트는 아직 사용할 수 있습니다.

나는 vue-frag로 이사했다.

• 인(「」로 )import 표시)
• 보다 깨끗한 마크업을 실현합니다(없음).<!-- --> 장소
• 깔끔한 빌드 타임플러그인을 탑재하고 있어<fragment> 에 꼬리표를 달다
• 보다 최근에 유지된 것 같다

언급URL : https://stackoverflow.com/questions/51653178/vue-warn-error-in-nexttick-notfounderror-failed-to-execute-insertbefore