详解Vue中使用v-for语句抛出错误的解决方案


Posted in Javascript onMay 04, 2017

Vue 中使用v-for语句抛出错误的解决方案

今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误…通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错。

Uncaught (in promise) TypeError: Cannot read property ‘removeChild' of null

接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在v-for语句后面加如下语句解决:

<div v-for="item in items" track-by="id">

不过在Vue 2.0之后的版本中track-by改为了key,所以对于Vue 2.0之后的版本可以使用:

<div v-for="item in items" v-bind:key="item.id">

其实,在查看API返回的JSON数据后,发现重复请求了接口,所以,这个问题本来就不应该出现的。所以特意在接口获取数据的地方加上了一个过滤方法:

self.goodsList.indexOf(arr) === -1 ? self.goodsList.push(arr) : undefined

这句语句就是说如果获取的数组元素不重复的话,才将数组元素加入到列表中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
vue.js实现的绑定class操作示例
Jul 06 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
详解Node.js串行化流程控制
May 04 #Javascript
纯原生js实现贪吃蛇游戏
Apr 16 #Javascript
js调用刷新界面的几种方式
May 03 #Javascript
JavaScript中双向数据绑定详解
May 03 #Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 #Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 #Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
js常用代码段收集
2011/10/28 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
python中logging库的使用总结
2017/10/18 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python函数的万能参数传参详解
2019/07/26 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
上海中网科技笔试题
2012/02/19 面试题
Python文件操作的面试题
2013/06/22 面试题
党委书记个人对照检查材料
2014/09/15 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
儿子满月酒致辞
2015/07/29 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
讨论nginx location 顺序问题
2022/05/30 Servers