问题描述

出错信息：

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

出错代码：

1
2
3
4
5
6
7
8
9
10
{{ /* 聊天标签页聊天记录(群聊) */ }}
<div class="chat-container" v-if="talkingTo === -1">
    群聊
</div>
{{ /* 聊天标签页聊天记录(私聊) */ }}
<template v-for="(personIndex, index) in talkToPeople">
  <div class="chat-container" v-if="talkingTo === personIndex">
    {{people[personIndex].label}}
  </div>
</template>

解决方法

v-for前面需要有固定在dom里的元素，所以前一个同级dom元素不能用v-if(不确定是否挂载在dom上的)

将v-if 和 v-for的dom元素调换位置（在我这个项目可以这样处理，应该根据自身项目需求处理）

1
2
3
4
5
6
7
8
9
10
{{ /* 聊天标签页聊天记录(私聊) */ }}
<template v-for="(personIndex, index) in talkToPeople">
<div class="chat-container" v-if="talkingTo === personIndex">
{{people[personIndex].label}}
</div>
</template>
{{ /* 聊天标签页聊天记录(群聊) */ }}
<div class="chat-container" v-if="talkingTo === -1">
    群聊
</div>

参考链接

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