list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...

项目背景

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

初始代码如下：

父组件：

任务

• 删除

新建任务

/* 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

}

}

.div_center {

text-align: center;;

width:100%;

margin:0 auto;

}

子组件：

/* eslint-disable */

export default

{

data()

{

return {

inputName: Math.random()

}

},

methods: {

}

}

出现的问题

运行代码后，点击新建任务，出现的结果如下图：

点击第一行的删除按钮，预期当然是删掉第一行。然而出现的结果却是最后一行被删掉了，而其他元素未变。删除中间某元素也是最后一行被删掉。这时通过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，大功告成！

代码如下：

父组件：

任务

• 删除

新建任务

/* 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

}

}

.div_center {

text-align: center;;

width:100%;

margin:0 auto;

}

子组件：

/* eslint-disable */

export default

{

data()

{

return {

inputName: Math.random()

}

},

methods: {

}

}

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()}这样的数据，实测删除后是没有问题的。