CODEWITHSUNDEEP
javascriptdebuggingvue.jsvuejs2
William Holmes
William Holmes

Reputation: 61

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

Upvotes: 6

Views: 3758

Answers (3)

hamid hasani
hamid hasani

Reputation: 571

i had this error before.

in my project ,i figure out that when i deleting some element from dom and then refreshing the dom this error occur, actually i delete a record which was a tr element from vuetable and then refresh that vuetable .after this proccess my vuetable didnt work for me and your error appeared in my console so i decided delete my tr with another way!

So if you are working with dom, choose another way . for exmple if you are using v-if try v-show !! or if you are using this code 

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

try another way.

Upvotes: 0

smooth_smoothie
smooth_smoothie

Reputation: 1343

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>

Upvotes: 6

Benito G&#243;mez
Benito G&#243;mez

Reputation: 35

Found this error too, pushing a route change inside a mutation when the state change wasn't completed. Wrapping the route change push in Vue.nextTick() solved it.

Upvotes: 0

Related Questions