背景:
vue开发一个动态添加和删除表单元素的功能，如图：
动态添加删除表单.PNG
代码：
Html
<H5Header :headOptions="headerOpts"></H5Header>
<!--- <div v-for="(people, index) in peoples"> --->
<div v-for="(people, index) in peoples" v-if="people">
<div class="column-header flex flex-vc mt30">
<h2 class="column-tit flex-1">被保人{{index+1}}</h2>
<a class="delete-btn" href="javascript:;" otype="button" otitle="删除" @click="deletePerson(index)"></a>
</div>
<ItemForm ref="itemFormRef" :data="people"></ItemForm>
</div>
javascript
methods: {
// 继续添加
createPerson () {
this.peoples.push(this.newPerson)
},
deletePerson (index) {
if (this.peoples.length === 1) return
// this.peoples.splice(index, 1)
this.peoples.splice(index, 1, null)
},
...
}
正常来说，在删除子容器时，应该可以直接使用vue中数组的重写方法splice进行删除。
如：
this.peoples.splice(index, 1)
但发现，在删除元素后，总是最后面的元素会被删除，界面dom被重新加载，其实并没有被重新渲染，页面中的vue逻辑没有被正常执行。
尝试过多种方式后还是没有解决，感觉应该是当元素被删除后，后面元素的下标发生变化，导致元素中的内容被重新加载，但又没有被渲染。
因此我最终的解决方案是，如上图中所示
this.peoples.splice(index, 1, null)
注意在html中加上v-if="people"的判断是否显示的条件
将数组中要删除的元素设置为空（用v-if去隐藏），但又不改变数组的排列方式，从而最终解决问题。
但是这种解决方式只能说治标不治本，并不是一种最好的解决办法。
因此我想请问各位大神，有没有什么更好的方式可以解决？
