Vue.js调试消息的问题

Question

我已经使用Vue.js v2.5.1为前端构建了一个Web应用程序.该应用程序运行良好,但是当出现问题时,抛出的错误消息只引用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,但是所有的dev工具都显示了我所有Vue组件的列表,无论我做什么事件窗格都是空的.更糟糕的是,当这个错误发生时,整个应用程序都会停止(但是vue数据看起来还不错).

Answer 1

如果您正在对嵌入某处的模板中的元素进行条件渲染，并且您正在使用v-iftry to use v-show。

IE

<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>

Answer 2

也发现了这个错误，当状态更改未完成时，在突变内推送路由更改。包装路线更改推送Vue.nextTick()解决了这个问题。