详解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
这句语句就是说如果获取的数组元素不重复的话，才将数组元素加入到列表中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍解决vue组件中使用v-for出现告警问题及v for指令介绍，包括了解决vue组件中使用v-for出现告警问题及v for指令介绍的使用技巧和注意事项，需要的朋友参考一下 在项目中运行v-for代码段时， 解决方法： 在代码中绑定key值，可解决，如： PS：Vue2学习笔记:v-for指令 1.使用 结果： 总结 以上所述是小编给大家介绍的解决vue组件中使用v-for出现告警问
-
本文向大家介绍详解vue v-model，包括了详解vue v-model的使用技巧和注意事项，需要的朋友参考一下 1. v-model原理 vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分： 通过props设置子组件的状态 通过监听子组件发出的事件改变父组件
-
本文向大家介绍Vue中的v-for指令不起效果的解决方法，包括了Vue中的v-for指令不起效果的解决方法的使用技巧和注意事项，需要的朋友参考一下 我的代码之前类似下面的结构 结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我按照不在一个层级上改，果然好用了 以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给
-
本文向大家介绍基于vue中解决v-for使用报红并出现警告的问题，包括了基于vue中解决v-for使用报红并出现警告的问题的使用技巧和注意事项，需要的朋友参考一下 代码报红对于追求优美代码的强迫症患者来说看着很不舒服，报红如下： 控制台中也会有： 这样的提示，解决这个报红的问题，我们要根据他的提示，循环的时候加入一个唯一的key，这里选择使用index： 如此，报红消失。 以上这篇基于vue中解决
-
本文向大家介绍讲解JavaScript中for...in语句的使用方法，包括了讲解JavaScript中for...in语句的使用方法的使用技巧和注意事项，需要的朋友参考一下 这里是JavaScript支持的另外一个循环。它被称为for...in循环。这个循环是用于循环一个对象的属性。 因为我们还没有讨论的对象，所以使用这一循环可能会感觉不太明白。但是，一旦你会对JavaScript对象了解后，
-
本文向大家介绍对vue v-if v-else-if v-else 的简单使用详解，包括了对vue v-if v-else-if v-else 的简单使用详解的使用技巧和注意事项，需要的朋友参考一下 首先vue.js请注意 2.1.0版本以上方可使用v-else-if 页面展示如下： vue.js下载：https://github.com/vuejs/vue 以上这篇对vue v-if v-els