Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法

项目背景

最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件。同时每个元素都有删除按钮,点击后删除当前元素。
初始代码如下:
父组件:

<template>
    <div class="content-body">
        <div>任务</div>
          <div>
            <ul>
              <li v-for="(item,index) in selectionConditionList" :key="index" style="margin:10px 0">
                <v-selection-condition-list></v-selection-condition-list> <button @click="deleteSelectionCondition(index)">删除</button>
              </li>
            </ul>
          </div>
          <div>
             <button @click="addNewSelectionTask">新建任务</button>
          </div>
    </div>
</template>

<script>
/* eslint-disable */
import vSelectionConditionList from './SelectionConditionList'
  export default
  {
    data()
    {
      return {
        selectionConditionList:[],
      }
    },
    methods: {
      // 添加新的用户筛选条件
      addNewSelectionTask(){
        this.selectionConditionList.push({});
      },
      // 删除用户筛选条件
      deleteSelectionCondition(index){
        console.log("delete.."+index);
        this.selectionConditionList.splice(index,1);
      }
    },
    components:{
      vSelectionConditionList
    }
  }
</script>
<style>
  .div_center {
    text-align: center;;
    width:100%;
    margin:0 auto;
  }
</style>

子组件:

<template>
  <input type="text" :value="inputName">
</template>

<script>
/* eslint-disable */
  export default
  {
    data()
    {
      return {
        inputName: Math.random()
      }
    },
    methods: {
    }
  }
</script>

出现的问题

运行代码后,点击新建任务,出现的结果如下图:
图片描述

点击第一行的删除按钮,预期当然是删掉第一行。然而出现的结果却是最后一行被删掉了,而其他元素未变。删除中间某元素也是最后一行被删掉。这时通过console控制台的打印输出可以看到,删除的index索引是正确的。本人是vue新手,遇到此问题有些懵,查询官方文档及百度相关问题无果后,在segmentfault问答区提问,当时问题链接。然鹅提问一天以后,收到的回答还是没有完全解决问题,于是继续寻求解决方案。

解决方法

经过再次苦苦查询相关问题的问答帖及文章,终于发现问题是出在v-for的:key上。关于v-for中的:key介绍参见此页面:Vue2.0 v-for 中 :key 到底有什么用?,内容一大堆balabala,总之是由于虚拟DOM的原因引起的,我的理解就是:表单列表的生成是通过绑定的selectionConditionList数组来生成的,当selectionConditionList删除掉一项时,表单列表的dom对象自然也会减少一项。但是由于v-for循环的是子组件,子组件内部显示数据并未绑定selectionConditionList数组里的属性,因此子组件的显示数据并未按新数组重新渲染,体现出来的结果就是最后一个元素被删掉了。
解决方法就是给:key赋予一个独一无二的值,这样绑定的数组就可以和dom对象一一对应起来,删除的时候也能正确删除掉响应dom对象了。绑定这个“独一无二”的值,其中一个方法就是使用guid,也就是Global Unique Identifier,于是把生成guid的方法写到了一个公共的js文件里,:key绑定guid值,测试ok,大功告成!
代码如下:
父组件:

<template>
    <div class="content-body">
        <div>任务</div>
          <div>
            <ul>
              <li v-for="(item,index) in selectionConditionList" :key="item.guid" style="margin:10px 0">
                <v-selection-condition-list></v-selection-condition-list> <button @click="deleteSelectionCondition(index)">删除</button>
              </li>
            </ul>
          </div>
          <div>
             <button @click="addNewSelectionTask">新建任务</button>
          </div>
    </div>
</template>

<script>
/* eslint-disable */
import Utils from '../utils/utils.js'
import vSelectionConditionList from './SelectionConditionList'
  export default
  {
    data()
    {
      return {
        selectionConditionList:[],
      }
    },
    methods: {
      // 添加新的用户筛选条件
      addNewSelectionTask(){
        this.selectionConditionList.push({guid:Utils.guid()});
      },
      // 删除用户筛选条件
      deleteSelectionCondition(index){
        console.log("delete.."+index);
        this.selectionConditionList.splice(index,1);
      }
    },
    components:{
      vSelectionConditionList
    }
  }
</script>
<style>
  .div_center {
    text-align: center;;
    width:100%;
    margin:0 auto;
  }
</style>

子组件:

<template>
  <input type="text" :value="inputName">
</template>

<script>
/* eslint-disable */
  export default
  {
    data()
    {
      return {
        inputName: Math.random()
      }
    },
    methods: {
    }
  }
</script>

guid方法:

/* eslint-disable */
var utils = {
  guid: function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }
}
export default utils

后话

此问题只出现在v-for嵌套子组件的情况下。如果是v-for循环一个div或表单对象,而对象中的数据都是通过数组中的对象属性绑定的,那么数组删除其中一项后,dom对象列表也可以相应正确渲染。有兴趣的话可以把子组件换成input对象,然后在selectionConditionList中添加类似{val:Math.random()}这样的数据,实测删除后是没有问题的。

阅读 6.6k

推荐阅读
有为法
用户专栏

前端知识边学变写,为自己积累,也希望能为别人解惑。

8 人关注
10 篇文章
专栏主页