Hello,
I’ve replicated this in a new minimal Vue app:
which can be run locally with `npm run serve’ and accessed at http://localhost:8080/#/detail/123
This happens on Vue page which is defined in router as
path: 'records/:id',
name: 'RecordDetail',
props: true,
and linked with ‘a.com/#/records/123’
Record with id 123 is loaded from database, usually rendered properly (other times it has this issue: https://stackoverflow.com/questions/58729274/vue-font-awesome-svg-sometimes-renders-icons-twice )
then clicking on a button which has handler ‘itemConfirm’ gives the same error:
vue.esm.js?a026:628 [Vue warn]: 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.”
itemConfirm @ RecordDetail.vue?f97b:145
click @ RecordDetail.vue?e784:50
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2184
original._wrapper @ vue.esm.js?a026:7559
vue.esm.js?a026:1897 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.
There’s no nextTick() function in my code. I do NOT use v-for (saw this as another cause).
The whole component code, simplified and still giving the error:
This forum doesn’t render script code, so here it is: https://stackoverflow.com/questions/58729274/vue-font-awesome-svg-sometimes-renders-icons-twice
Record JSON data as loaded from server:
{
"id": "mkt7y3v0m5vupnal",
"practitioner_id": "yyie5csyc0y1lwcg",
"day": "2019-11-08",
"start_time": "16:00",
"end_time": "16:45",
"status": "New",
"practitioner_name": "Dr Ruby Decker"
}
When clicking Confirm, the page often renders this duplicated content:
Removing this condition
v-if="item.status == 'New'"
gets rid of the error.
Any hints, please? (@LinusBorg maybe you’d have a suggestion?)