Vue.js 디버깅메시지 문제

Vue.js 디버깅메시지 문제

프런트 엔드로 Vue.js v2.5.1을 사용하여 웹 애플리케이션을 구축했습니다.응용 프로그램은 일반적으로 정상적으로 동작하지만 문제가 발생했을 때 발생하는 오류 메시지는 문제의 실제 원인이 되는 코드 부분(템플릿에 있다고 가정함)이 아니라 vue.js 코드 자체만을 참조합니다.

다음은 예를 제시하겠습니다.

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."
warn @ vue.js?v=1:491
logError @ vue.js?v=1:600
globalHandleError @ vue.js?v=1:595
handleError @ vue.js?v=1:584
(anonymous) @ vue.js?v=1:735
nextTickHandler @ vue.js?v=1:685
vue.js?v=1:604 DOMException: Failed to execute 'insertBefore' on 
'Node': The node before which the new node is to be inserted is not a child of this node.
at Object.insertBefore (https://mywebsite.com/js/vendor/vue.js?v=1:5138:20)
at updateChildren (https://mywebsite.com/js/vendor/vue.js?v=1:5628:48)
at patchVnode (https://mywebsite.com/js/vendor/vue.js?v=1:5695:41)
at updateChildren (https://mywebsite.com/js/vendor/vue.js?v=1:5592:21)
at patchVnode (https://mywebsite.com/js/vendor/vue.js?v=1:5695:41)
at updateChildren (https://mywebsite.com/js/vendor/vue.js?v=1:5592:21)
at patchVnode (https://mywebsite.com/js/vendor/vue.js?v=1:5695:41)
at updateChildren (https://mywebsite.com/js/vendor/vue.js?v=1:5592:21)
at patchVnode (https://mywebsite.com/js/vendor/vue.js?v=1:5695:41)
at updateChildren (https://mywebsite.com/js/vendor/vue.js?v=1:5592:21)

어떻게 하면 문제의 원인을 알 수 있을까요?Vue devtools를 사용해 보았지만 모든 개발 도구가 모든 Vue 구성 요소 목록이며 이벤트 창은 항상 비어 있습니다.게다가 이 에러가 발생하면, 애플리케이션 전체가 정지해 버립니다(그러나 vue 데이터는 정상적으로 표시됩니다).

어딘가에 삽입되어 있는 템플릿의 요소에 대해 조건부 렌더링을 수행하고 있는 경우v-if사용하려고 하다v-show대신.

예.

<template>

<div id="remote">
  <span v-show="disable===true" v-on:click="enableInput"> {{account_company_name}} </span>

  <div v-show="disable===false">
    <Span><i>Tip: Press Enter to save</i></Span>
  <input  
type="text" 
  v-model.lazy="account_company_name"
  v-on:keyup.enter="disableInput">
  </div>

</div>
</template>

이 에러도 검출되어 상태 변경이 완료되지 않았을 때 변환 내부에서 루트 변경을 푸시했습니다.루트 변경 푸시 랩핑Vue.nextTick()해결했습니다.

전에도 이런 오류가 있었어요.

제 프로젝트에서, 제가 돔에서 어떤 요소를 삭제하고 돔을 새로 고쳤을 때, 저는 실제로 vuetable에서 tr 요소였던 레코드를 삭제하고 그 vuetable을 새로 고쳤다는 것을 알게 되었습니다.이 처리 후에 저의 vuetable은 작동하지 않았고, 당신의 오류가 콘솔에 나타나서 다른 방법으로 tr을 삭제하기로 결정하였습니다!

따라서 dom을 사용하는 경우 다른 방법을 선택합니다. 예를 들어 v-if try v-show!!를 사용하거나 이 코드를 사용하는 경우 등입니다.

event.target.closest("tr").remove()

다른 방법을 시도하다

언급URL : https://stackoverflow.com/questions/47581820/issue-with-vue-js-debugging-messages