javascript - Problém so správami o ladení vo Vue.js


Vytvoril som webovú aplikáciu pomocou Vue.js v2.5.1 pre front-end. Aplikácia väčšinou funguje dobre, ale keď nastane problém, chybové hlásenia, ktoré sa zobrazia, odkazujú len na kód vue.js samotného, namiesto častí môjho kódu (predpokladám niečo v mojich šablónach), ktoré sú nepochybne skutočným zdrojom problému.

Tu je príklad:

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)

Ako môžem použiť toto na to, aby som sa dostal k zdroju problému? Skúšal som použiť Vue devtools, ale všetko, čo tieto dev tools ukážu, je zoznam všetkých mojich Vue komponentov, a panel udalostí je vždy prázdny, nech robím čokoľvek. Ešte horšie je, že keď sa táto chyba objaví, celá aplikácia sa úplne zastaví (ale všetky údaje vo Vue stále vyzerajú byť v poriadku).

Odpoveď č. 1

Ak vykonávate podmienené vykresľovanie na prvku v šablóne, ktorá je vložená niekde inde, a používate v-if, skúste namiesto toho použiť v-show.

t.j.

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

Odpoveď č. 2

Našiel som aj túto chybu, keď som v mutácii spustil zmenu trasy, keď zmena stavu ešte nebola dokončená. Obalenie volania zmeny trasy do Vue.nextTick() to vyriešilo.