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()}这样的数据,实测删除后是没有问题的。
list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...相关推荐
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- vue按钮字体大小设置_vue项目中应用自定义的字体
1.下载ttf文件,保存到assets/css/font里面,在css下面新建font.css. 2.font.css内容:在这,有些ttf的格式可能不对,在项目中用不了,我一般去https://ww ...
- idea中vue文件 游览器图标_vue项目中icon图标的完美引入
经典语录:一切就像滑滑梯.一路上放肆张扬的笑了下来.最终重重的摔在下面.头破血流. 一.那些离开你的人,无论当初是出于什么原因离开的,也许他犹豫过挣扎过不舍过,但至少在他决定要走的那一瞬间,他觉得没有 ...
- C语言试题十六之写删除字符串中指定下标的字符。其中,a指向原字符串,删除后的字符串存放在b所指的数组中,n中存放指定的下标。
1. 题目 请编写一个函数void function(char a[],char b[], int n),其功能是:删除字符串中指定下标的字符.其中,a指向原字符串,删除后的字符串存放在b所指的数组中 ...
- Maven 手动安装JAR包到本地maven仓库后,但在项目中依旧报错找不到JAR包解决方法
Maven 手动安装JAR包到本地maven仓库后,但在项目中依旧报错找不到JAR包解决方法 参考文章: (1)Maven 手动安装JAR包到本地maven仓库后,但在项目中依旧报错找不到JAR包解决 ...
- 直播页面5:项目中的直播播放器框架GSYVideoPlayer
直播页面5:项目中的直播播放器框架GSYVideoPlayer 一.github地址 二.代码 0.快手官网获得直播地址 1.xml布局 2.java代码 一.github地址 https://git ...
- win7“找不到该项目”的错误原因及解决方法
相信有很多网友经常会碰到在使用Windows7系统删除文件或者文件夹的时候,出现"找不到该项目"的错误提示.我想大家一定很有印象.这个时候大部分的人都可能再次点击"重试& ...
- 在angular 项目中使用 `npm run build` 出现 `* exceeded maximum budget` 警告或错误
在angular 项目中使用 npm run build 出现 * exceeded maximum budget 警告或错误 Warning or Error in exceeded maximum ...
- list vue 删除后页面渲染_浅谈Vue项目实战(页面渲染+事件绑定)
页面渲染 vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里 *js代码片* export default { data() { return { formInline: ...
最新文章
- 创业者周鸿祎前传(西安交大时期)
- hdu-1251(基本字典树)
- 适用于Java EE / Jakarta EE开发人员的Micronaut
- ArcSDE数据库连接(直连、服务连)与GT_Geometry存储配置图解
- (转) mp4编码全介绍 (一)
- spring boot 使用 com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别
- ASP.NET身份验证机制membership入门——API篇
- 我们计划招收300名深度学习者,免费攻读傅里叶变换和MATLAB
- IEEE 1588 报文封装
- S5P4418裸机开发(六):串口初试,简单回显(轮询模式)
- Android 11.0 12.0系统默认授予读写权限给第三方app
- Visual Studio 2019 v16.10 和 v16.11 Preview 1 现已推出!
- SpringBoot 整合eazyPoi 4.3.0 Excel数据导入导出(持续更新功能)
- 风很大的PMP证书真有这么厉害?这是被腾讯/华为招聘时所提到过的证书
- PIM SM模式下BSR与RP选举机制
- 你的网卡真有千兆么?——千兆网卡传输速度解析
- MOOC学习数据结构--第一周
- 握手机制的verilog实现
- Petri网描述语言
- AutoSAR技术手册