详解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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
原生js实现日期联动
2015/01/12 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python实现画循环圆
2019/11/23 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
财务管理专业推荐信
2013/11/19 职场文书
网络宣传方案
2014/03/15 职场文书
个人借款担保书
2014/04/02 职场文书
房屋租赁协议书
2014/04/10 职场文书
新员工辞职信范文
2015/05/12 职场文书
成事在人观后感
2015/06/16 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
交通事故协议书范本
2016/03/19 职场文书