Vue splice删除数组元素,dom有变化,但数组的剩余元素没有被重新渲染

背景:

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去隐藏),但又不改变数组的排列方式,从而最终解决问题。
但是这种解决方式只能说治标不治本,并不是一种最好的解决办法。
因此我想请问各位大神,有没有什么更好的方式可以解决?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容