详解Vue中使用v-for语句抛出错误的解决方案
更新时间：2017年05月04日 08:50:57 作者：xjlinme
本篇文章主要介绍了详解Vue中使用v-for语句抛出错误的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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
这句语句就是说如果获取的数组元素不重复的话，才将数组元素加入到列表中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vuejs如何通过Axios请求数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现简易的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本系列文章介绍一个简单的实时定位示例，基于VUE + OPENLAYERS实现实时定位功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
这篇文章主要为大家详细介绍了vue双花括号的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了VSCode使用之Vue工程配置eslint，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要为大家介绍了Vue3通用API功能示例剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了Vue.js 响应接口的相关资料，文中实例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
npm安装vue脚手架报错警告npm WARN deprecated
安装vue脚手架报错可能具体原因比较多,可以根据报错信息进行排查,本文主要介绍了npm安装vue脚手架报错警告npm WARN deprecated,感兴趣的可以了解一下2023-11-11
本文主要介绍了Vue使用extend动态创建组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论