Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with Vue.js debugging messages

I have build an web application using Vue.js v2.5.1 for the front-end. The application works well generally, but when there is a problem, the error messages that get thrown only reference the vue.js code itself rather than the parts of my code (I assume something in my templates) that are no doubt the actual source of the problem.

Here is an example:

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)

How can I use this to get to the source of the problem? I have tried using Vue devtools, but all the dev tools show is a list of all my Vue components, the events pane is always empty whatever I do.Whats worse is that when this error occurs, then the whole application grinds to a halt (but the vue data all looks ok still).

like image 567
William Holmes Avatar asked Nov 30 '17 20:11

William Holmes


1 Answers

If you are doing conditional rendering on an element in an template that is being embedded somewhere and you are using v-if try to use v-show instead.

i.e.

<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>
like image 58
smooth_smoothie Avatar answered Oct 15 '22 21:10

smooth_smoothie